<template >
  <div class="app-container">
    <!-- 头部 -->
    <div class="dataScreen-head">
      <div class="dataScreen-title">
        <p id="robotxj"></p>
      </div>
    </div>
    <!-- 内容 -->
    <div class="dataScreen-contner">
      <!-- 左边抽屉按钮 -->
      <el-button @click="drawer = true" round type="primary" size="mini"  style="color:#0b73c5;z-index:1000;position: fixed;left:2.5%;top:44%;border:none;background:none !important;">
        <i class="el-icon-d-arrow-right"></i>
      </el-button>
      <!-- 右边抽屉按钮 -->
      <el-button @click="dialog = true" round type="primary" size="mini"  style="color: #0b73c5;z-index:1000;position: fixed;right:-1%;top:45%;border:none;background:none !important;">
        <i class="el-icon-d-arrow-left"></i>
      </el-button>
      <!-- 左边 -->
      <div class="dataScreen-left">
        <!-- 机器人列表 -->
        <div class="dataScreen-robot">
          <!-- 标题 -->
          <div class="dataScreen-rotitle">
            <p>机器人列表</p>
          </div>
          <!-- 列表 -->
          <div class="dataScreen-rolist">
            <!-- 表头 -->
            <el-table align="le" @row-click="selectrobot" :data="robots" height="100%"
              :class="[isDologin ? 'scrollbarShow' : 'commonScrollbarTable']"
              :header-cell-style="{ background: '#132743', opacity: '0.4', color: '#FFFFFF', fontSize: '12px', 'text-align': 'left' }"
              :row-style="{ height: '36px', background: 'tranaparent', fontSize: '12px' }"
              :cell-style="{ padding: '0px', }"
              style="font-size: 12px; font-weight: bold; color:#a1c3dc; border-bottom: none;">
              <el-table-column label="编号" >
                <template slot-scope="scope">
                  <div class="list-img" style="fontSize:'12px';display:flex;align-items: center;">
                    <img src="../../components/images/001.png" width="40px" height="30px" alt="" />
                    <div style="background-image:-webkit-linear-gradient(bottom,#63a5dc,#09d1e3); -webkit-background-clip:text; -webkit-text-fill-color:transparent; font-size: 12px; font-weight: bold;margin-left:-30px ">
                      00{{ scope.$index + 1 }}
                    </div>
                    <P style="font-size:12px; font-weight: bold; display: inline-block;margin-left:10px;">
                      {{ scope.row.robot_num }}
                    </P>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="robot_name" label="名称" >
              </el-table-column>
              <el-table-column label="状态" width="50px" style="display:flex;align-items: center;justify-content: center;">
                <template slot-scope="scope">
                  <img src="../../components/images/run.png" width="20px" height="20px" alt=""
                       v-if="scope.row.robot_state == 1">
                  <img src="../../components/images/wrong.png" width="20px" height="20px" alt="" v-else>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <!-- 电器参数 -->
        <div class="dataScreen-electrical">
          <!-- 标题 -->
          <div class="dataScreen-eltitle">
            <p>电气参数</p>
            <el-select v-model="selectedOption[0]" :placeholder="selectedOption[0]" @change="getOptionPLC">
              <el-option v-for="item in plcList" :key="item.robot_config_id+'_'+item.plc_num"
                         :label="item.plc_name + ' ' + (item.plc_state == 1 ? '在线' : '离线') " :value="item.robot_config_id+'_'+item.plc_num"></el-option>
            </el-select>
          </div>
          <!-- 参数列表 -->
          <div class="dataScreen-ellist" style="overflow:auto;">
            <div class="item" v-hasPermi="['robot:jqrdw1:view']">
              <p style="color: #a1c3dc;">机器人到位信号1</p>
              <p style="color: #9f702c;" v-if="tsjjqrdwxh1=='未到位'">{{tsjjqrdwxh1}}</p>
              <p style="color: #a2b5d7;" v-else-if="tsjjqrdwxh1=='无'">{{ tsjjqrdwxh1 }}</p>
              <p style="color: #2da14e;" v-else >{{ tsjjqrdwxh1 }}</p>
            </div>
            <div class="item"  v-hasPermi="['robot:jqrdw2:view']">
              <p style="color: #a1c3dc;">机器人到位信号2</p>
              <p style="color: #9f702c;" v-if="tsjjqrdwxh2=='未到位'">{{tsjjqrdwxh2}}</p>
              <p style="color: #a2b5d7;" v-else-if="tsjjqrdwxh2=='无'">{{ tsjjqrdwxh2 }}</p>
              <p style="color: #2da14e;" v-else >{{ tsjjqrdwxh2 }}</p>
            </div>
            <div class="item"  v-hasPermi="['robot:tsjsdw:view']">
              <p style="color: #a1c3dc;">提升机上到位</p>
              <p style="color: #9f702c;" v-if="tsjssdw1=='未到位'">{{tsjssdw1}}</p>
              <p style="color: #a2b5d7;" v-else-if="tsjssdw1=='无'">{{ tsjssdw1 }}</p>
              <p style="color: #2da14e;" v-else >{{ tsjssdw1 }}</p>
            </div>
            <div class="item"  v-hasPermi="['robot:tsjxdw:view']">
              <p style="color: #a1c3dc;">提升机下到位</p>
              <p style="color: #9f702c;" v-if="tsjxjdw2=='未到位'">{{tsjxjdw2}}</p>
              <p style="color: #a2b5d7;" v-else-if="tsjxjdw2=='无'">{{ tsjxjdw2 }}</p>
              <p style="color: #2da14e;" v-else >{{ tsjxjdw2 }}</p>
            </div>
            <div class="item"  v-hasPermi="['robot:ddmkdw:view']">
              <p style="color: #a1c3dc;">电动门开到位</p>
              <p style="color: #9f702c;" v-if="ddmkdw=='未到位'">{{ddmkdw}}</p>
              <p style="color: #a2b5d7;" v-else-if="ddmkdw=='无'">{{ ddmkdw }}</p>
              <p style="color: #2da14e;" v-else >{{ ddmkdw }}</p>
            </div>
            <div class="item"  v-hasPermi="['robot:ddmgdw:view']">
              <p style="color: #a1c3dc;">电动门关到位</p>
              <p style="color: #9f702c;" v-if="ddmgdw=='未到位'">{{ddmgdw}}</p>
              <p style="color: #a2b5d7;" v-else-if="ddmgdw=='无'">{{ ddmgdw }}</p>
              <p style="color: #2da14e;" v-else >{{ ddmgdw }}</p>
            </div>
            <div class="item"  v-hasPermi="['robot:cdzdw1:view']">
              <p style="color: #a1c3dc;">充电桩机器人到位信号1</p>
              <p style="color: #a2b5d7;">{{ cdzdwxh1 }}</p>
            </div>
            <div class="item"  v-hasPermi="['robot:cdzdw2:view']">
              <p style="color: #a1c3dc;">充电桩机器人到位信号2</p>
              <p style="color: #a2b5d7;">{{ cdzdwxh2 }}</p>
            </div>
          </div>
        </div>
        <!-- 设备运行参数 -->
        <div class="dataScreen-equipment">
          <!-- 标题 -->
          <div class="dataScreen-eqtitle">
            <p>设备运行参数</p>
          </div>
          <!-- 参数列表 -->
          <div class="dataScreen-ellist" style="overflow:auto;">
            <div class="item">
              <p style="color: #a1c3dc;">电机转速(r/min)</p>
              <p style="color: #a2b5d7;">{{ djzs }}</p>
            </div>
            <div class="item">
              <p style="color: #a1c3dc;">机器人方向</p>
              <p style="color: #9a4814;" v-if="jqrfx=='后退'">{{ jqrfx }}</p>
              <p style="color: #a2b5d7;" v-else-if="jqrfx=='无'">{{ jqrfx }}</p>
              <p style="color: #2da14e;" v-else >{{ jqrfx }}</p>
            </div>
            <div class="item">
              <p style="color: #a1c3dc;">机器人模式</p>
              <p style="color: #a2b5d7;">{{ jqrms }}</p>
            </div>
            <div class="item">
              <p style="color: #a1c3dc;">电池状态</p>
              <p style="color: #96e81a;" v-if="dczt=='充电'">{{ dczt }}</p>
              <p style="color: #a2b5d7;" v-else-if="dczt=='无'">{{ dczt }}</p>
              <p style="color: #9f702c;" v-else >{{ dczt }}</p>
            </div>
            <div class="item">
              <p style="color: #a1c3dc;">电机温度(℃)</p>
              <p style="color: #ee1c22;" v-if="djwd > 90">{{ djwd }}</p>
              <p style="color: #9eee25;" v-else-if="djwd > 60">{{ djwd }}</p>
              <p style="color: #46cc51;" v-else-if="djwd > 40">{{ djwd }}</p>
              <p style="color: #29ab33;" v-else-if="djwd > 30">{{ djwd }}</p>
              <p style="color: #30a96a;" v-else-if="djwd > 20">{{ djwd }}</p>
              <p style="color: #a2b5d7;" v-else-if="djwd=='无'">{{ djwd }}</p>
              <p style="color: #0b853c;" v-else>{{ djwd }}</p>
            </div>
            <div class="item">
              <p style="color: #a1c3dc;">1#电机</p>
              <p style="color: #a2b5d7;">{{ dj1 }}</p>
            </div>
            <div class="item">
              <p style="color: #a1c3dc;">2#电机</p>
              <p style="color: #a2b5d7;">{{ dj2 }}</p>
            </div>
            <div class="item">
              <p style="color: #a1c3dc;">1#摄像头</p>
              <p style="color: #a2b5d7;">{{ sxt1 }}</p>
            </div>
            <div class="item">
              <p style="color: #a1c3dc;">2#摄像头</p>
              <p style="color: #a2b5d7;">{{ sxt2 }}</p>
            </div>
            <div class="item">
              <p style="color: #a1c3dc;">轨道长度</p>
              <p style="color: #a2b5d7;">{{ gdzcd }}</p>
            </div>
            <div class="item">
              <p style="color: #a1c3dc;">收钩</p>
              <p style="color: #a2b5d7;">{{ sg }}</p>
            </div>
            <div class="item">
              <p style="color: #a1c3dc;">放钩</p>
              <p style="color: #a2b5d7;">{{ fg }}</p>
            </div>
          </div>
        </div>
      </div>
      <!-- 中间 -->
      <div class="dataScreen-center">
        <!-- 告警数据 -->
        <div class="dataScreen-alarm">
          <div class="dataScreen-alaimg">
            <!-- 喇叭图标 -->
            <img id="spkid" src="../../components/images/spk.gif" alt="" height="18px" width="25px"/>
          </div>
          <div class="dataScreen-alatext">
            <div id="box">
              <ul id="con1" ref="con1" :class="{ anim: animate == true }">
                <li v-for="(alarm) in alarms " :key="alarm.id">
                  <font style="color: #FFD200;font-size: 14px">{{ alarm.robot_name }}&nbsp;&nbsp;&nbsp;{{ alarm.alarminfo }}&nbsp;&nbsp;&nbsp;&nbsp;
                    <font style="color: #64ccff;font-size: 14px">{{ alarm.alarmtime }}</font>
                  </font>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <!-- 监控视频区 -->
        <div class="dataScreen-video">
          <!-- 摄像头图标 -->
          <div class="dataScreen-videoimg">
            <img src="../../components/images/robot.png" alt="">
          </div>
          <!-- 监控画面 -->
          <!-- 大华摄像头 -->
          <div class="dataScreen-videoBox" v-show="this.camera_type == 0">
            <div class="dataScreen-videoIcon">
              <video v-show="videoShowQ" id="DHQvideo" class="video-js" style="width:100%;height:99%" controls autoplay
                     autobuffer muted preload="auto" disablePictureInPicture="true" controlslist="nodownload"></video>
            </div>
            <div class="dataScreen-videoIcon" style="border-left:0px ">
              <video v-show="videoShowH" id="DHHvideo" class="video-js" style="width:100%;height:99%" controls autoplay
                     autobuffer muted preload="auto" disablePictureInPicture="true" controlslist="nodownload"></video>
            </div>
          </div>
          <!-- 吊舱摄像头 -->
          <div class="dataScreen-videoBox" v-show="this.camera_type == 2">
            <div class="dataScreen-videoIcon">
              <video v-show="videoShowQ" id="DCQvideo" class="video-js" style="width:100%;height:99%" controls autoplay
                     autobuffer muted preload="auto" disablePictureInPicture="true" controlslist="nodownload"></video>
            </div>
            <div class="dataScreen-videoIcon" style="border-left:0px ">
              <video v-show="videoShowH" id="DCHvideo" class="video-js" style="width:100%;height:99%" controls autoplay
                     autobuffer muted preload="auto" disablePictureInPicture="true" controlslist="nodownload"></video>
            </div>
          </div>
          <!-- 海康摄像头 -->
          <div class="dataScreen-videoBox" v-show="this.camera_type == 1">
            <div class="dataScreen-videoIcon">
              <video id="HKQvideo" class="video-js" style="width:100%;height:99%" controls autoplay autobuffer muted
                     preload="auto" disablePictureInPicture="true" controlslist="nodownload"></video>
            </div>
            <div class="dataScreen-videoIcon" style="">
            </div>
          </div>
        </div>
        <!-- 轨道部分 -->
        <div class="dataScreen-track">
          <!-- 图标部分 -->
          <div class="dataScreen-trackTop">
            <div class="dataScreen-trackIcon1">
              <img src="../../components/images/contorll.png" alt="">
              <p>巡检点</p>
            </div>
            <div class="dataScreen-trackIcon2">
              <img src="../../components/images/contorl.png" alt="">
              <p>机器人</p>
            </div>
            <div class="dataScreen-trackIcon3">
              <div
                  style="width:24px;height:8px;background:linear-gradient(-85deg, #3F9FDC, #7AF9FD);">
              </div>
              <p>位移 <font style="color: #5DCBFF"> {{ sswy }}</font> m</p>
            </div>
            <div class="dataScreen-trackIcon4">
              <div
                  style="width:24px;height:8px;background: linear-gradient(-85deg, #365084, #7a80fd);">
              </div>
              <p>电压
                <font style="color: #138047;" v-if="dcdy > 70">{{ dcdy }}</font>
                <font style="color: #0e8618;" v-else-if="dcdy > 50">{{ dcdy }}</font>
                <font style="color: #29ab33;" v-else-if="dcdy > 40">{{ dcdy }}</font>
                <font style="color: #46cc51;" v-else-if="dcdy > 30">{{ dcdy }}</font>
                <font style="color: #9eee25;" v-else-if="dcdy > 20">{{ dcdy }}</font>
                <font style="color: #a5f1a6;" v-else-if="dcdy > 15">{{ dcdy }}</font>
                <font style="color: #5DCBFF;" v-else-if="dcdy=='无'">{{ dcdy }}</font>
                <font style="color: #e19532;" v-else>{{ dcdy }}</font>
                v</p>
            </div>
            <div class="dataScreen-trackIcon5">
              <div
                  style="width:24px;height:8px;background: linear-gradient(-85deg, #268c76, #1d83a7);">
              </div>
              <p>电量
                <font style="color: #30a96a;" v-if="dcdl > 80">{{ dcdl }}</font>
                <font style="color: #46cc51;" v-else-if="dcdl > 70">{{ dcdl }}</font>
                <font style="color: #9eee25;" v-else-if="dcdl > 60">{{ dcdl }}</font>
                <font style="color: #9eee25;" v-else-if="dcdl > 50">{{ dcdl }}</font>
                <font style="color: #a5f1a6;" v-else-if="dcdl > 30">{{ dcdl }}</font>
                <font style="color: #e19532;" v-else-if="dcdl > 20">{{ dcdl }}</font>
                <font style="color: #5DCBFF;" v-else-if="dcdl=='无'">{{ dcdl }}</font>
                <font style="color: #de5c23;" v-else>{{ dcdl }}</font>
                %</p>
            </div>
            <div class="dataScreen-trackIcon6">
              <div
                  style="width:24px;height:8px;background: linear-gradient(-85deg, rgb(65 142 226), rgb(29 84 167));">
              </div>
              <p>运行灯
                <font style="color: #bb5d10;" v-if="yxd =='关闭'">{{ yxd }}</font>
                <font style="color: #5DCBFF;" v-else-if="yxd =='无'">{{ yxd }}</font>
                <font style="color: #17a956;" v-else>{{ yxd }}</font>
              </p>
            </div>
          </div>
          <!-- 轨道点 -->
          <div class="dataScreen-trackBtom1" v-if="typeof this.result == 'undefined' || this.result == null">暂无电子地图</div>
          <div class="dataScreen-trackBtom" ref="chinaMapChart" v-else></div>
        </div>
      </div>
      <!-- 右边 -->
      <div class="dataScreen-right">
        <!-- 图标 -->
        <div class="dataScreen-rightIcon">
          <!-- 机器人 -->
          <div class="dataScreen-rightIcon1">
            <img id="jqrimgid" src="../../components/images/jiqiren2.png" alt=""  style="display: block">
            <img id="jqrimgid1" src="../../components/images/jiqiren1.png" alt=""  style="display: none">
            <router-link :to="'/robot/robot/robotconfig'"><p class="pname">机器人&nbsp;&nbsp;<span class="p1">{{ robots.length }}</span></p></router-link>
          </div>
          <!-- PLC -->
          <div class="dataScreen-rightIcon1">
            <img id="plcimgid" src="../../components/images/plc2.png" alt=""  style="display: block">
            <img id="plcimgid1" src="../../components/images/plc1.png" alt=""  style="display: none">
            <router-link :to="'/robot/robot/plc'"><p class="pname">PLC &nbsp;&nbsp;<span class="p2">{{ plcList.length }}</span></p></router-link>
          </div>
          <!-- 告警 -->
          <div class="dataScreen-rightIcon1">
            <img id="bjimgid" src="../../components/images/gaojin2.png" alt=""  style="display: block">
            <img id="bjimgid1" src="../../components/images/gaojin1.png" alt=""  style="display: none">
            <router-link :to="'/robot/alarm/alarmData'"><p class="pname">告警&nbsp;&nbsp;<span class="p3">{{ alarms.length == 1 ? 0 : alarms.length }}</span></p></router-link>
          </div>
        </div>
        <!-- 巡检列表 -->
        <div class="dataScreen-inspection">
          <!-- 标题 -->
          <div class="dataScreen-intitle">
            <router-link :to="'/robot/xjgls/patroltaskhis'"> <p>巡检列表</p></router-link>
          </div>
          <!-- 列表 -->
          <div class="dataScreen-inlist">
            <!-- 表头 -->
            <el-table :data="patrols" ref="table" height="90%"
                      :class="[isDologin ? 'scrollbarShow' : 'commonScrollbarTable']"
                      :header-cell-style="{ background: '#132743', opacity: '0.4', color: '#FFFFFF', fontSize: '12px', 'text-align': 'center' }"
                      :row-style="{ height: '33px', fontSize: '12px' }" :cell-style="{ margin: '2px', 'text-align': 'center' }"
                      style="font-size: 12px; font-weight: bold; color:#a1c3dc; border-bottom: none;">
              <el-table-column prop="position_num" label="巡检点" width="60px">
              </el-table-column>
              <el-table-column prop="creater_time_str" label="时间" width="90px">
              </el-table-column>
              <el-table-column prop="vals" label="结果" width="70px">
              </el-table-column>
              <el-table-column prop="resc" label="资源">
              </el-table-column>
            </el-table>
          </div>
        </div>
        <!-- 环境参数 -->
        <div class="dataScreen-parameter">
          <!-- 标题 -->
          <div class="dataScreen-paratitle">
            <p>环境参数</p>
          </div>
          <!-- 参数列表 -->
          <div class="dataScreen-paraBox">
            <div class="concentration1">
              <div id="hygrometer"></div>
              <p style="color: #a1c3dc;font-size: 12px">甲烷(%LEL)</p>
            </div>
            <div class="concentration1">
              <div id="hygrometer2"></div>
              <p style="color: #a1c3dc;font-size: 12px">氧气(%)</p>
            </div>
            <div class="concentration1">
              <div id="hygrometer3"></div>
              <p style="color: #a1c3dc;font-size: 12px">硫化氢(PPM)</p>
            </div>
            <div class="concentration1">
              <div id="hygrometer4"></div>
              <p style="color: #a1c3dc;font-size: 12px">现场温度(℃)</p>
            </div>
            <div class="concentration1">
              <div id="hygrometer5"></div>
              <p style="color: #a1c3dc;font-size: 12px">现场湿度(%LEL)</p>
            </div>
            <div class="concentration1">
              <div id="hygrometer6"></div>
              <p style="color: #a1c3dc;font-size: 12px">氨气(PPM)</p>
            </div>
          </div>
        </div>
        <!-- 环境参数检测 -->
        <div class="dataScreen-detection">
          <!-- 标题 -->
          <div class="dataScreen-deTitle">
            <p>环境参数检测</p>
          </div>
          <!-- 参数图表 -->
          <div class="echart" id="mychart"></div>
        </div>
      </div>
      <!-- 抽屉 -->
      <!-- 左边抽屉 -->
      <div class="left">
        <el-drawer :modal="false"  :direction="direction" :visible.sync="drawer" :with-header="false" size="27%">
          <!-- plc面板 -->
          <div class="PLCpanel">
            <div class="PLCpanel-p1">
              <p>PLC面板</p>
            </div>
            <div class="PLCpanel-para">
              <p class="PLCpanel-parap1">显示参数</p>
              <p class="PLCpanel-parap2" style="width:50px;height:3px;background-color:#4691FF;"></p>
              <el-select class="PLCpanel-parap3" v-model="selectedOption[0]" :placeholder="selectedOption[0]"
                         @change="getOptionPLC">
                <el-option v-for="item in plcList" :key="item.robot_config_id+'_'+item.plc_num"
                           :label="item.plc_name + ' ' + (item.plc_state == 1 ? '在线' : '离线')" :value="item.robot_config_id+'_'+item.plc_num"></el-option>
              </el-select>
            </div>
            <div class="PLCpane2">
              <div class="PLCpane2-left" style="margin-right:6px">
                <p class="P1">提升机上到位</p>
                <p>{{ tsjssdw1 }}</p>
              </div>
              <div class="PLCpane2-left">
                <p class="P1">提升机下到位</p>
                <p>{{ tsjxjdw2 }}</p>
              </div>
            </div>
            <div class="PLCpane2">
              <div class="PLCpane2-left" style="margin-right:6px">
                <p class="P1">机器人到位信号1</p>
                <p>{{ tsjjqrdwxh1 }}</p>
              </div>
              <div class="PLCpane2-left">
                <p class="P1">机器人到位信号2</p>
                <p>{{ tsjjqrdwxh2 }}</p>
              </div>
            </div>
            <div>
              <img src="../../components/images/line.png" alt="">
            </div>
            <div class="PLCpane3">
              <div class="PLCpane3-left" style="margin-right:6px">
                <p class="P1">电门开到位</p>
                <p>{{ ddmkdw }}</p>
              </div>
              <div class="PLCpane3-left">
                <p class="P1">电门关到位</p>
                <p>{{ ddmgdw }}</p>
              </div>
            </div>
          </div>
          <!-- 公共操作 -->
          <div class="operation">
            <div class="operation1">
              <p class="operation-p1">公共操作</p>
              <p class="operation-p2" style="width:50px;height:3px;background-color:#4691FF;"></p>
            </div>
            <div v-hasPermi="['robot:bgcz:view']">
              <div class="operation2">
                <img src="../../components/images/biangui.png" alt="" style="width:20px;height:20px">
                <p>变轨</p>
              </div>
              <div style="display:flex">
                <div class="operation3">
                  <el-button class="operation3-1" size="mini" @click="bzg()">变直轨</el-button>
                  <el-button class="operation3-2" size="mini" @click="bgtz()">停止</el-button>
                </div>
                <div class="operation4">
                  <el-button class="operation4-1" size="mini" @click="bwg()">变弯轨</el-button>
                </div>
              </div>
               <div>
                  <img src="../../components/images/line.png" alt="">
               </div>
            </div>

            <div v-hasPermi="['robot:ddmcz:view']">
                <div class="operation2">
                  <img src="../../components/images/door.png" alt="" style="width:20px;height:20px">
                  <p>电动门</p>
                </div>
                <div style="display:flex">
                  <div class="operation3">
                    <el-button class="operation3-1" size="mini" @click="ddmk()">电动门(开)</el-button>
                    <el-button class="operation3-2" size="mini" @click="ddmzt()">停止</el-button>
                  </div>
                  <div class="operation4">
                    <el-button class="operation4-1" size="mini" @click="ddmg()">电动门(关)</el-button>
                  </div>
                </div>
            </div>
          </div>
        </el-drawer>
      </div>
      <!-- 右边抽屉 -->
      <div class="right">
        <el-drawer :modal="false"  :direction="directions" :visible.sync="dialog" :with-header="false" size="26%">
          <div class="right-top">
            <div class="right-topTitle">
              <p>机器人面板</p>
            </div>

            <div class="Speed-dial">
              <div id="gauges2" ref="gauges2" style="width:30%;height:100px; margin-top:40px">
              </div>
              <div id="gauges" ref="gauges" style="width:38%;height:140px; margin-top:4px"></div>
              <div id="gauges3" ref="gauges3" style="width: 30%;height:100px; margin-top:40px"></div>
            </div>

            <div class="right-mode">
              <div class="mode-box">
                <p>现场温度</p>
                <p>{{ xcwd }}</p>
              </div>
              <div class="mode-box">
                <p>现场湿度</p>
                <p>{{ xcsd }}</p>
              </div>
              <div class="mode-box">
                <p>模式</p>
                <p>{{ jqrms }}</p>
              </div>
              <div class="mode-box">
                <p>方向</p>
                <p>{{ jqrfx }}</p>
              </div>
              <div class="mode-box">
                <p>电池电压</p>
                <p>{{ dcdy }}</p>
              </div>
            </div>
            <div style="margin-left:14px;margin-bottom:5px">
              <img src="../../components/images/line.png" alt="">
            </div>
            <div class="Mode-selection">
              <p>模式选择</p>
            </div>
            <!-- 五个按钮 -->
            <div class="Operation-button" id="#btn">
              <div class="Operation-buttonBox" @click="jqrmsF('1')">
                <el-button size="mini" circle @click="selectedTab = 0"></el-button>
                <p>手动模式</p>
              </div>
<!--              <div class="Operation-buttonBox" @click="jqrmsF('2')">-->
<!--                  <el-button size="mini" circle style="-->
<!--                                                  background: linear-gradient(227deg, #0F947C, #10DAB2);">-->
<!--                  </el-button>-->
<!--                  <p>自动模式</p>-->
<!--             </div>-->
              <div class="Operation-buttonBox" @click="jqrzymsF('0')" v-hasPermi="['robot:syzyms:view']">
                <el-button @click="selectedTab = 3" size="mini" circle style="
                                                background: linear-gradient(227deg, #C45016, #F58614);">
                </el-button>
                <p>自由</p>
              </div>
              <div class="Operation-buttonBox" @click="jqrzymsF('3')">
                <el-button size="mini" circle style="
                                                background: linear-gradient(227deg, #337F17, #3CA813);">
                </el-button>
                <p>返航</p>
              </div>
              <div class="Operation-buttonBox" @click="zt()">
                <el-button size="mini" circle style="
                                                  background: linear-gradient(227deg, #B72517, #EA392D);">
                </el-button>
                <p>暂停</p>
              </div>
            </div>
          </div>
          <!-- 手动模式 -->
          <div class="right-bottom1" v-if="selectedTab === 0">
            <div class="right-bottomTitle">
              <p>手动模式</p>
              <p></p>
            </div>
            <div style=" display: flex;flex-direction: column;align-items: center;">
              <div class="Target-position">
                <div class="Target-position1">
                  <p contenteditable="true" id="mbwzid">0</p>
                  <p>m</p>
                </div>
                <div class="Target-position2">
                  <p style="cursor: pointer" @click="mbwzF()">目标位置</p>
                </div>
              </div>
              <div class="Speed-setting">
                <div class="Speed-setting1">
                  <el-dropdown @command="sdmslb" style="margin-left:12px">
                    <el-button type="primary" size="min" style="width: 80px;
                        height: 30px;background: #17255d !important;
                        border: 2px solid #54619D;
                        border-radius: 10px;
                        font-size: 12px;
                        font-family: Bahnschrift;
                        font-weight: 400;
                        color: #C1C1C1;">
                      {{ sdmssdzd }}<i class="el-icon-arrow-down el-icon--right"></i>
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item command="0">0</el-dropdown-item>
                      <el-dropdown-item command="1000">1000</el-dropdown-item>
                      <el-dropdown-item command="2000">2000</el-dropdown-item>
                      <el-dropdown-item command="3000">3000</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                  <p>r/min</p>
                </div>
                <div class="Target-position2">
                  <p style="cursor: pointer" @click="sdmsdF()">设定速度</p>
                </div>
              </div>
              <div class="right-bottomBox4" v-if="showButtons">
                <el-button class="btn1" size="default" @click="fgfun()">放钩</el-button>
                <el-button class="btn2" size="default" @click="sgfun()">收钩</el-button>
              </div>
              <div class="Operation-Btn">
                <el-button class="Operation-Btn1" size="mini" @click="sdmsqd()">启动</el-button>
                <el-button class="Operation-Btn2" size="mini" @click="sdmsqj()">前进</el-button>
                <el-button class="Operation-Btn3" size="mini" @click="sdmsht()">后退</el-button>
              </div>
            </div>
          </div>
          <!-- 自动模式 -->
          <div class="right-bottom2" v-if="selectedTab === 1">
            <div class="right-bottomTitle">
              <p>自动模式</p>
              <span></span>
            </div>
            <div class="right-bottomBox">
              <div class="right-bottomBox1">
                <el-dropdown @command="zdmslb">
                  <el-button type="primary" size="min" style="width: 80px;
                        height: 30px;background:#17255d!important;
                        display: flex;
                        justify-content: space-around;
                        align-items: center;
                        border: 2px solid #54619D;
                        border-radius: 10px;
                        font-size: 12px;
                        font-family: Bahnschrift;
                        font-weight: 400;
                        color: #C1C1C1;">
                    {{ zdmssdzd }}<i class="el-icon-arrow-down el-icon--right"></i>
                  </el-button>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="0">0</el-dropdown-item>
                    <el-dropdown-item command="1000">1000</el-dropdown-item>
                    <el-dropdown-item command="2000">2000</el-dropdown-item>
                    <el-dropdown-item command="3000">3000</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
                <span>r/min</span>
                <el-button class="btn" size="default" @click="zdmsdsd()">速度设定</el-button>
              </div>
              <div class="right-bottomBox2" v-if="showButtons">
                <el-button class="btn1" size="default" @click="fgfun()">放钩</el-button>
                <el-button class="btn2" size="default" @click="sgfun()">收钩</el-button>
              </div>
              <div class="right-bottomBox3">
                <el-button class="btn1" size="default" @click="sdmsqd()">启动</el-button>
                <el-button class="btn2" size="default" @click="sdmsqj()">前进</el-button>
                <el-button class="btn3" size="default" @click="sdmsht()">后退</el-button>
              </div>
            </div>
          </div>
          <!-- 一键返航 -->
          <div class="right-bottom3" v-if="selectedTab === 2">
            <div class="right-bottomTitle">
              <p>一键返航</p>
              <span></span>
            </div>
            <div class="right-bottomBox">
              <el-button class="btn" size="default" @click="yjfh()">返航</el-button>
            </div>
          </div>
          <!-- 自由模式 -->
          <div class="right-bottom4" v-if="selectedTab === 3">
            <div class="right-bottomTitle">
              <p>自由模式</p>
              <span></span>
            </div>
            <div class="right-bottomBox">
              <div class="right-bottomBox1">
                <el-dropdown @command="zymslb">
                  <el-button type="primary" size="min" style="width: 80px;
                                                                                                  height: 30px;background:#17255d !important;
                                                                                                  display: flex;
                                                                                                  justify-content: space-around;
                                                                                                  align-items: center;
                                                                                                  border: 2px solid #54619D;
                                                                                                  border-radius: 10px;
                                                                                                  font-size: 12px;
                                                                                                  font-family: Bahnschrift;
                                                                                                  font-weight: 400;
                                                                                                  color: #C1C1C1;">
                    {{ zymssdzd }}<i class="el-icon-arrow-down el-icon--right"></i>
                  </el-button>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="0">0</el-dropdown-item>
                    <el-dropdown-item command="1000">1000</el-dropdown-item>
                    <el-dropdown-item command="2000">2000</el-dropdown-item>
                    <el-dropdown-item command="3000">3000</el-dropdown-item>
                    <el-dropdown-item command="4000">4000</el-dropdown-item>
                    <el-dropdown-item command="5000">5000</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
                <span>r/min</span>
                <el-button class="btn" size="default" @click="zymsdsd()">速度设定</el-button>
              </div>
              <div class="right-bottomBox2" v-if="showButtons">
                <el-button class="btn1" size="default" @click="fgfun()">放钩</el-button>
                <el-button class="btn2" size="default" @click="sgfun()">收钩</el-button>
              </div>
              <div class="right-bottomBox3">
                <el-button class="btn1" size="default" @click="zymsqd()">启动</el-button>
                <el-button class="btn2" size="default" @click="zymsqj()">前进</el-button>
                <el-button class="btn3" size="default" @click="zymsht()">后退</el-button>
              </div>
            </div>
          </div>
        </el-drawer>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import 'echarts-liquidfill';
import {listonPageRobotConfig} from "@/api/robot/robotconfig/robotconfig";
import {getTrackMaprobot} from "@/api/robot/trackmap/trackmap";
import rbt from '@/assets/imgs/rbt3.png';
import rbt1 from '@/assets/imgs/rbt4.png';
import point from '@/assets/imgs/point1.png';
import {listsPlc} from "@/api/robot/plc/plc";
import {
  bgtzCmd,
  bwgCmd,
  bzgCmd,
  ddmkCmd,
  ddmztCmd,
  ddspCmd,
  dmgCmd,
  fgCmd,
  htCmd,
  ippingCmd,
  jqrdataCmd,
  jqrsdCmd,
  jqrsdzymsCmd,
  lxspCmd,
  mbwzCmd,
  msszCmd,
  plcdataCmd,
  qjCmd,
  robotrunCmd,
  robotstopCmd,
  sgCmd,
  xjsdCmd,
  yjfhCmd,
  zdqdCmd,
  zymshtCmd,
  zymsmsszCmd,
  zymsqjCmd,
  zymsrobotrunCmd
} from "@/api/robot/modbus/modbus";
import {onLineStatus} from "@/api/robot/camera/cameraDH/video";
import $ from 'jquery';
import {alarmtaskResult} from "@/api/robot/patroltask/patroltask";
import Vue from 'vue';
import vueSeamlessScroll from 'vue-seamless-scroll'
let myChart = null;
let myChart1 = null;
let myChart2 = null;
let myChart3 = null;
let myChart4 = null;
let myChart5 = null;
let myChart6 = null;
let myChart7 = null;
let myChart8 = null;
let myChart9 = null;
let myChart10 = null;
Vue.use(vueSeamlessScroll);
export default {
  /* 获取最外层盒子 */
  name: 'home',
  data() {
    return {
      //是否展示视频
      videoShowQ: false,
      videoShowH: false,
      //存放没有数据时提示信息的
      result: [],
      //控制点击救援增加的按钮
      showButtons: false,
      zymssdzd: 1000,//自由模式速度设定
      zdmssdzd: 1000,//自动模式速度设定
      sdmssdzd: 1000,//手动模式速度设定
      //切换不同的监控画面,默认大华的类型
      camera_type: 0,
      //大华前摄像头服务
      webRtcServer: null,
      //大华后摄像头服务
      webRtcServer1: null,
      //控制模式板块的切换(表示默认显示第一个内容)
      selectedTab: 0,
      timerval: null, // 定时器名称
      //报警列表
      alarms: [{ alarmtime: "暂无数据" }],
      //查询参数
      queryparm: {
        robot_config_id: undefined,
        robot_id: undefined,
        robotid: undefined,
        valu: undefined,
        robot_ip: undefined,
        robot_port: undefined,
        plcip: undefined,
        plcport: undefined,
        residence_time: undefined
      },queryparms3: {
        robot_id: undefined,
        valu: undefined,
        robot_ip: undefined,
        robot_port: undefined,
        plcip: undefined,
        plcport: undefined,
        video_ip1: undefined,
        video_name1: undefined,
        video_pwd1: undefined,
        video_port1: undefined,
        residence_time: undefined,
        plcid: undefined,
        video_ip2: undefined,
        video_name2: undefined,
        video_pwd2: undefined,
        video_port2: undefined,
      },//摄像头参数
      queryparms4: {
        valu: undefined,
        //camera_type:localStorage.getItem("camera_type"),
        video_ip1: localStorage.getItem("video_ip1"),
        video_name1: localStorage.getItem("video_name1"),
        video_pwd1: localStorage.getItem("video_pwd1"),
        video_port1: localStorage.getItem("video_port1"),
        residence_time: undefined,
        video_ip2: localStorage.getItem("video_ip2"),
        video_name2: localStorage.getItem("video_name2"),
        video_pwd2: localStorage.getItem("video_pwd2"),
        video_port2: localStorage.getItem("video_port2"),
        robot_config_id: localStorage.getItem("robot_config_id"),
      },//plc列表数据
      plcList: [],
      reports: [],
      queryParams: {
        plc_name: undefined
      }, queryParams1: {
        plcid: undefined
      }, queryParams2: {
        robotid: undefined
      },//plc默认选中项
      selectedOption: [],
      patrols: [{ creater_time_str: "暂无数据" }],
      //机器人列表
      robots: [],
      arrdata: [[]],
      robotid: undefined,
      creater_time_str: undefined,
      resc: undefined,
      //表单参数
      form: {},
      //机器人列表
      loading: true,//遮罩层
      count: 0,
      //查询参数
      sswy: "无",//实时位移
      gdzcd: "无",//轨道长度
      tzcd: "无",//停止充电
      kqcd: "无",//开始充电
      tsjxj: "无",//准备下降提升机
      tsjss: "无",//准备上升提升机
      gbddm: "无",//准备关闭电动门
      kqddm: "无",//准备开启电动门
      djwd: "无",//电机温度
      dj1:"无",//1#电机
      dj2:"无",//2#电机
      sxt1:"无",//1#摄像头
      sxt2:"无",//2#摄像头
      zmd1:"无",//照明灯1
      zmd2:"无",//照明灯2
      yxd:"无",//运行灯
      sg:"无",//收钩
      fg:"无",//放钩
      djzs: "无",//电机转速
      jw: "无",//甲烷
      yq: "无",//氧气
      lhq: "无",//硫化氢
      aq: "无",//氨气
      xcwd: "无",//现场温度
      xcsd: "无",//现场湿度
      dczt: "无",//电池状态
      dcdl: "无",//电池电量
      dcdy: "无",//电池电压
      dqjcdwz: "无",//当前巡检点位置
      gswl: "无",//格栅设定数量
      jcgssl: "无",//检测格栅孔数量
      jqrms: "无",//机器人模式
      jqrsd: "无",//机器人速度设定
      jqrfx: "无",//机器人方向
      mbwz: "无",//目标位置值设定
      cdzdwxh1: "无",//充电桩机器人到位信号1
      cdzdwxh2: "无",//充电桩机器人到位信号1
      tsjjqrdwxh1: "无",//提升装置机器人到位信号1
      tsjjqrdwxh2: "无",//提升装置机器人到位信号2
      ddmkdw: "无",//电动门开到位
      ddmgdw: "无",//电动门关到位
      tsjssdw1: "无",//提升装置轨道到位1（上升到位）
      tsjxjdw2: "无",//提升装置轨道到位2（下降到位）
      // 警告数据中间
      animate: false,
      input: 20,
      drawer: false,
      dialog: false,
      direction: 'ltr',
      directions: 'rtl',
      timer: null,
      timer1: null,
      timer2: null,
      //控制机器人的滚动条
      isDologin: false,
    }
  },
  created() {
    //初始化页面加载方法
    this.getrobotList();//初始化机器人列表数据
    this.getplcList();//初始化plc列表数据
    this.getMap();//电子地图
    //this.getQOnlie(); //摄像头状态
  },
  mounted() {
    //加载完页面加载方法
    //是否显示脱钩、放钩按钮
    localStorage.getItem("robotype")==='1'?this.showButtons=true:this.showButtons=false;
    //标题初始化
    $("#robotxj").text(localStorage.getItem("robot_name")==null?"机器人巡检监控":localStorage.getItem("robot_name")+"巡检监控");
    //定时器轮询程序
    this.timer = setInterval(() => {
      this.getrobotList();//机器人列表
      this.getplcList();//plc列表
      this.alarmtask();//报警数据、巡检列表
      this.getMap();//电子地图
      this.robotdata();//机器人实时数据、环境参数水滴图
      this.plcdata();//plc实时数据
      this.initEcharts();//环境参数检测、柱状图
     // document.getElementById('spkid').src = document.getElementById('spkid').src;//报警图标动态显示
      console.log("首页定时")
    }, 2000);//2000毫秒
    this.spbf(localStorage.getItem("camera_type"));//挂在完成后播放当前的监控视频
    setInterval(this.scroll,5000);//初始化滚动警告数据
    this.infinitScroll();//巡检列表滚动逻辑
    this.getQOnlie();
  },
  beforeDestroy() { //页面改变销毁定时器
    if(myChart != null){myChart.clear();myChart = null;}
    if(myChart1 != null){myChart1.clear();myChart1 = null;}
    if(myChart2 != null){myChart2.clear();myChart2 = null;}
    if(myChart3 != null){myChart3.clear();myChart3 = null;}
    if(myChart4 != null){myChart4.clear();myChart4 = null;}
    if(myChart5 != null){myChart5.clear();myChart5 = null;}
    if(myChart6 != null){myChart6.clear();myChart6 = null;}
    if(myChart7 != null){myChart7.clear();myChart7 = null;}
    if(myChart8 != null){myChart8.clear();myChart8 = null;}
    if(myChart9 != null){myChart9.clear();myChart9 = null;}
    if(myChart10 != null){myChart10.clear();myChart10 = null;}
    if (this.timer) { clearInterval(this.timer); }
    if (this.timer1) { clearInterval(this.timer1); }
    if (this.timer2) { clearInterval(this.timer2); }
    if (this.webRtcServer != null) {
      this.webRtcServer.disconnect()
      this.webRtcServer = null
    }
    if (this.webRtcServer1 != null) {
      this.webRtcServer1.disconnect()
      this.webRtcServer1 = null
    }
  },
  methods: {
    //根据机器人查询数据
    selectrobot(row) {
      //摄像头相关
      if (this.webRtcServer != null) {
        this.webRtcServer.disconnect();
        this.webRtcServer = null
      }
      if (this.webRtcServer1 != null) {
        this.webRtcServer1.disconnect();
        this.webRtcServer1 = null
      }
      localStorage.removeItem("robot_config_id");//删除机器人id
      localStorage.removeItem("robot_name");//删除机器人名称
      localStorage.removeItem("video_ip1");//删除摄像头1ip
      localStorage.removeItem("video_port1");//删除摄像头1端口号
      localStorage.removeItem("video_name1");//删除摄像头1账号
      localStorage.removeItem("video_pwd1");//删除摄像头1密码
      localStorage.removeItem("video_ip2");//删除摄像头2ip
      localStorage.removeItem("video_port2");//删除摄像头2端口号
      localStorage.removeItem("video_name2");//删除摄像头2账号
      localStorage.removeItem("video_pwd2");//删除摄像头2密码
      localStorage.removeItem("robotype");//删除机器人类型
      localStorage.removeItem("camera_type");//删除摄像头类型
      localStorage.setItem("robot_config_id", row.id);//存储值
      localStorage.setItem("robot_name", row.robot_name);//存储值
      localStorage.setItem("video_ip1", row.video_ip1);//存储值
      localStorage.setItem("video_port1", row.video_port1);//存储值
      localStorage.setItem("video_name1", row.video_name1);//存储值
      localStorage.setItem("video_pwd1", row.video_pwd1);//存储值
      localStorage.setItem("video_ip2", row.video_ip2);//存储值
      localStorage.setItem("video_port2", row.video_port2);//存储值
      localStorage.setItem("video_name2", row.video_name2);//存储值
      localStorage.setItem("video_pwd2", row.video_pwd2);//存储值
      localStorage.setItem("robotype", row.robot_type);//存储值
      localStorage.setItem("camera_type", row.camera_type);//存储值
      this.queryparm.robotid = localStorage.getItem("robot_config_id");
      this.queryparm.residence_time = localStorage.getItem("residence_time") //设置停留时间
      //摄像头参数
      this.queryparms4.video_ip1 = localStorage.getItem("video_ip1");
      this.queryparms4.video_name1 = localStorage.getItem("video_name1");
      this.queryparms4.video_pwd1 = localStorage.getItem("video_pwd1");
      this.queryparms4.video_port1 = localStorage.getItem("video_port1");
      this.queryparms4.video_ip2 = localStorage.getItem("video_ip2");
      this.queryparms4.video_name2 = localStorage.getItem("video_name2");
      this.queryparms4.video_pwd2 = localStorage.getItem("video_pwd2");
      this.queryparms4.video_port2 = localStorage.getItem("video_port2");
      this.queryparms4.robot_config_id = localStorage.getItem("robot_config_id");
      $("#robotxj").text(localStorage.getItem("robot_name") + "巡检监控");//机器人名称标题
      localStorage.getItem("robotype") ==='1'? this.showButtons = true:this.showButtons = false;//是否显示脱钩、放钩按钮
      this.getplcList();//根据机器人id查询plc列表
      //this.getreportList();//巡检报告
      this.robotdata(); //查询当前机器人数据
      this.camera_type = localStorage.getItem("camera_type")
      this.spbf(localStorage.getItem("camera_type"));//摄像头视频播放
      this.getQOnlie(); //摄像头状态
    }, //获取摄像头在线或离线
    getQOnlie() {
      //====== 大华摄像头==========
      if (this.camera_type == 0) {
        if (localStorage.getItem("video_ip1") != null
            && localStorage.getItem("video_ip1") != ""
            && localStorage.getItem("video_ip2") != null
            && localStorage.getItem("video_ip2") != ""
            && localStorage.getItem("video_name1") != null
            && localStorage.getItem("video_name1") != ""
            && localStorage.getItem("video_name2") != null
            && localStorage.getItem("video_name2") != ""
            && localStorage.getItem("video_pwd1") != null
            && localStorage.getItem("video_pwd1") != ""
            && localStorage.getItem("video_pwd2") != null
            && localStorage.getItem("video_pwd2") != ""
            && localStorage.getItem("video_port1") != null
            && localStorage.getItem("video_port1") != ""
            && localStorage.getItem("video_port2") != null
            && localStorage.getItem("video_port2") != ""
        ) {
          this.queryparms4.robot_config_id = localStorage.getItem("robot_config_id");
          onLineStatus(this.queryparms4).then(response => {
            // this.OnlineArry1 = response.data[0];
            // this.OnlineArry2 = response.data[1];
            // this.onlineList = [...this.OnlineArry1, ...this.OnlineArry2]
          });
        }
      } else {
        this.onlineList = null
      }
      //====== 吊舱摄像头==========
      if (this.camera_type == 2) {
        this.queryparms4.robot_config_id = localStorage.getItem("robot_config_id");
        if (localStorage.getItem("video_ip1") != null && localStorage.getItem("video_ip1") != "") {
          onLineStatus(this.queryparms4).then(response => {
            // this.OnlineArry1 = response.data[0];
            // this.OnlineArry2 = response.data[1];
            // this.onlineList = [...this.OnlineArry1, ...this.OnlineArry2]
          });
        }
      } else {
        this.onlineList = null
      }
      //====== 海康摄像头==========
      if (this.camera_type == 1) {
        if (localStorage.getItem("video_ip1") != null
            && localStorage.getItem("video_ip1") != ""
            && localStorage.getItem("video_name1") != null
            && localStorage.getItem("video_name1") != ""
            && localStorage.getItem("video_pwd1") != null
            && localStorage.getItem("video_pwd1") != ""
            && localStorage.getItem("video_port1") != null
            && localStorage.getItem("video_port1") != ""
        ) {
          this.queryparms4.robot_config_id = localStorage.getItem("robot_config_id");
          onLineStatus(this.queryparms4).then(response => {
            // this.OnlineArry1 = response.data[0];
            // this.OnlineArry2 = response.data[1];
            // this.onlineList = [...this.OnlineArry1, ...this.OnlineArry2]
          });
        }
      } else {
        this.onlineList = null
      }
    }, //定时任务查询当前机器人数据柱状图
    robotdata() {
      this.queryparm.robotid = localStorage.getItem("robot_config_id");
      if (typeof (this.queryparm.robotid) != "undefined" && this.queryparm.robotid != null && this.queryparm.robotid != "") {
        //实时数据
        jqrdataCmd(this.queryparm).then(response => {
          if (typeof response.data != "undefined" && response.data != null) {
            this.dczt = response.data.dczt;//电池状态
            this.sswy = response.data.sswy;//实时位移
            this.gdzcd = response.data.gdzcd;//轨道长度
            this.dcdy = response.data.dcdy;//电池电压
            this.djwd = response.data.djwd;//电机温度
            this.djzs = response.data.djzs;//电机转速
            this.dcdl =response.data.dcdl;//电池电量
            this.jqrfx = response.data.jqrfx;//机器人方向
            this.jqrms = response.data.jqrms;//机器人模式
            this.jw =response.data.jw;//甲烷浓度
            this.yq = response.data.yq;//氧气浓度
            this.aq = response.data.aq;//氨气
            this.lhq = response.data.lhq;//硫化氢
            this.xcwd = response.data.xcwd;//现场温度
            this.xcsd =response.data.xcsd;//现场湿度
            this.gswl = response.data.gswl;//格栅设定数量
            this.jcgssl = response.data.jcgssl;//检测格栅孔数量
            this.dj1 =response.data.dj1;//1#电机
            this.dj2 = response.data.dj2;//2#电机
            this.sxt1 = response.data.sxt1;//1#摄像头
            this.sxt2 = response.data.sxt2;//2#摄像头
            this.zmd1 = response.data.zmd1;//照明灯1
            this.zmd2 = response.data.zmd2;//照明灯2
            this.yxd  =response.data.yxd;//运行灯
            this.sg  = response.data.sg;//收钩
            this.fg  = response.data.fg;//放钩
            this.drawLiquidfill(this.yq, this.jw, this.lhq, this.aq, this.xcsd, this.xcwd, localStorage.getItem("robot_name"));
            if (this.dialog) {
              this.echarts1(this.djzs);//电机转速
              this.echarts2(this.djwd);//电机温度
              this.echarts3(this.dcdl);//电池电量
            }
          } else {
            this.dczt = "无";//电池状态
            this.sswy = "无";//实时位移
            this.gdzcd = "无";//轨道长度
            this.dcdy = "无";//电池电压
            this.djwd = "无";//电机温度
            this.djzs = "无";//电机转速
            this.dcdl = "无";//电池电量
            this.jqrfx = "无";//机器人方向
            this.jqrms = "无";//机器人模式
            this.jw = "无";//甲烷浓度
            this.yq = "无";//氧气浓度
            this.aq = "无";//氨气
            this.lhq = "无";//硫化氢
            this.xcwd = "无";//现场温度
            this.xcsd = "无";//现场湿度
            this.gswl = "无";//格栅设定数量
            this.jcgssl = "无";//检测格栅孔数量
            this.dj1 = "无",//1#电机
            this.dj2 = "无",//2#电机
            this.sxt1 = "无",//1#摄像头
            this.sxt2 = "无",//2#摄像头
            this.zmd1 = "无",//照明灯1
            this.zmd2 = "无",//照明灯2
            this.yxd = "无",//运行灯
            this.sg = "无",//收钩
            this.fg = "无",//放钩
            this.drawLiquidfill(0, 0, 0, 0, 0, 0, localStorage.getItem("robot_name"));
            if (this.dialog) {
              this.echarts1(0);//电机转速
              this.echarts2(0);//电机温度
              this.echarts3(0);//电池电量
            }
          }
        });
      } else {
        this.dczt = "无";//电池状态
        this.sswy = "无";//实时位移
        this.gdzcd = "无";//轨道长度
        this.dcdy = "无";//电池电压
        this.djwd = "无";//电机温度
        this.djzs = "无";//电机转速
        this.dcdl = "无";//电池电量
        this.jqrfx = "无";//机器人方向
        this.jqrms = "无";//机器人模式
        this.jw = "无";//甲烷浓度
        this.yq = "无";//氧气浓度
        this.aq = "无";//氨气
        this.lhq = "无";//硫化氢
        this.xcwd = "无";//现场温度
        this.xcsd = "无";//现场湿度
        this.gswl = "无";//格栅设定数量
        this.jcgssl = "无";//检测格栅孔数量
        this.dj1 = "无",//1#电机
        this.dj2 = "无",//2#电机
        this.sxt1 = "无",//1#摄像头
        this.sxt2 = "无",//2#摄像头
        this.zmd1 = "无",//照明灯1
        this.zmd2 = "无",//照明灯2
        this.yxd = "无",//运行灯
        this.sg = "无",//收钩
        this.fg = "无",//放钩
        this.drawLiquidfill(0, 0, 0, 0, 0, 0, localStorage.getItem("robot_name"));
        if (this.dialog) {
          this.echarts1(0);//电机转速
          this.echarts2(0);//电机温度
          this.echarts3(0);//电池电量
        }
      }
    },//定时刷新plc实时数据
    plcdata() {
      this.queryParams1.plcid = localStorage.getItem("plcid");
      if (typeof (this.queryParams1.plcid) != "undefined" && this.queryParams1.plcid != null && this.queryParams1.plcid != "") {
        plcdataCmd(this.queryParams1).then(response => {
          if (typeof response.data != "undefined" && response.data != null) {
            this.cdzdwxh1 = response.data.cdzdwxh1; //充电桩机器人到位信号1
            this.cdzdwxh2 = response.data.cdzdwxh2; //充电桩机器人到位信号2
            this.tsjjqrdwxh1 = response.data.tsjjqrdwxh1; //提升装置到位信号1
            this.tsjjqrdwxh2 = response.data.tsjjqrdwxh2; //提升装置到位信号2
            this.tsjssdw1 = response.data.tsjssdw1;//提升装置轨道到位1（上升到位）
            this.tsjxjdw2 = response.data.tsjxjdw2;//提升装置轨道到位2（下降到位）
            this.ddmkdw = response.data.ddmkdw;//电动门开到位
            this.ddmgdw = response.data.ddmgdw;//电动门关到位
          } else {
            this.cdzdwxh1 = "无"; //充电桩机器人到位信号1
            this.cdzdwxh2 = "无"; //充电桩机器人到位信号2
            this.tsjjqrdwxh1 = "无"; //提升装置到位信号1
            this.tsjjqrdwxh2 = "无"; //提升装置到位信号2
            this.tsjssdw1 = "无";//提升装置轨道到位1（上升到位）
            this.tsjxjdw2 = "无";//提升装置轨道到位2（下降到位）
            this.ddmkdw = "无";//电动门开到位
            this.ddmgdw = "无";//电动门关到位
          }
        });
      } else {
        this.cdzdwxh1 = "无"; //充电桩机器人到位信号1
        this.cdzdwxh2 = "无"; //充电桩机器人到位信号2
        this.tsjjqrdwxh1 = "无"; //提升装置到位信号1
        this.tsjjqrdwxh2 = "无"; //提升装置到位信号2
        this.tsjssdw1 = "无";//提升装置轨道到位1（上升到位）
        this.tsjxjdw2 = "无";//提升装置轨道到位2（下降到位）
        this.ddmkdw = "无";//电动门开到位
        this.ddmgdw = "无";//电动门关到位
      }
    },//根据机器人id查询plc列表
    getplcList() {
      this.queryParams.robot_config_id = localStorage.getItem("robot_config_id");
      if (typeof (this.queryParams.robot_config_id) != "undefined" && this.queryParams.robot_config_id != null && this.queryParams.robot_config_id != "") {
        let fg = 0;
        listsPlc(this.queryParams).then(response => {
          this.plcList = response.rows;
          if (typeof this.plcList != 'undefined' && this.plcList.length > 0) {
            if (typeof this.selectedOption[0] != "undefined" && this.selectedOption[0] != null) {
              //获取当前在线plc赋值给选择列表框
              const plc_len = this.plcList.length;
              for (let i = 0; i < plc_len; i++) {
                if (localStorage.getItem("plcid") == this.plcList[i].robot_config_id+'_'+this.plcList[i].plc_num) {
                  this.selectedOption = [];
                  this.selectedOption.push(this.plcList[i].plc_name + ' ' + (this.plcList[i].plc_state == 1 ? '在线' : '离线'));
                  localStorage.removeItem("plcid");//删除键值
                  localStorage.setItem("plcid", this.plcList[i].robot_config_id+'_'+this.plcList[i].plc_num);//存储值
                  fg = 1;
                  break;
                }
              }//如果是没有相同值，赋新值给选择列表框
              if (fg == 0) {
                this.selectedOption = [];
                this.selectedOption.push(this.plcList[0].plc_name + ' ' + (this.plcList[0].plc_state == 1 ? '在线' : '离线'));//默认下拉框选择第一条记录
                localStorage.removeItem("plcid");//删除键值
                localStorage.setItem("plcid", this.plcList[0].robot_config_id+'_'+this.plcList[0].plc_num);//存储值
              }
            } else {//选择框没有赋值，赋新值给选择列表框
              this.selectedOption = [];
              this.selectedOption.push(this.plcList[0].plc_name + ' ' + (this.plcList[0].plc_state == 1 ? '在线' : '离线'));//默认下拉框选择第一条记录
              localStorage.removeItem("plcid");//删除键值
              localStorage.setItem("plcid", this.plcList[0].robot_config_id+'_'+this.plcList[0].plc_num);//存储值
            }
          } else {
            localStorage.removeItem("plcid");//删除键值
            this.selectedOption = [];
            this.plcList = [];
          }
          this.plcdata();//根据plc的id查询电气参数数据
        });
      }
    },//根据机器人id查询报警、巡检列表
    alarmtask() {
      this.queryparm.robot_config_id = localStorage.getItem("robot_config_id");
      if (typeof (this.queryparm.robot_config_id) != "undefined" && this.queryparm.robot_config_id != null && this.queryparm.robot_config_id != "") {
        alarmtaskResult(this.queryparm).then(response => {
          if (typeof (response) != "undefined" && response != null && response.data != null) {
            //巡检结果列表
            if (response.data.taskresult != null && response.data.taskresult.length > 0) {
              this.patrols = [];
              this.patrols = response.data.taskresult;
            } else {
              this.patrols = [{ creater_time_str: "暂无数据" }];
            }//报警结果列表
            if (response.data.alarmresult != null && response.data.alarmresult.length > 0) {
              this.alarms = [];
              this.alarms = response.data.alarmresult;
            } else {
              this.alarms = [{ alarmtime: "暂无数据" }];
            }
          }
        });
      }
    },//*查询机器人列表
    getrobotList() {
      listonPageRobotConfig(this.queryParams).then(response => {
        this.robots = response.rows;
      });
    },//选择plc列表，缓存plcid
    getOptionPLC(plcid) {
      localStorage.removeItem("plcid");//删除键值
      localStorage.setItem("plcid", plcid);//存储值
      this.plcdata();//查询电气参数数据
    },//摄像头视频画面播放
    spbf(camera_type) {
      //====大华摄像头======
      if (camera_type == 0) {
        //大华前摄像头
        if (localStorage.getItem("video_ip1") != null && localStorage.getItem("video_ip1") != "") {
          //检测摄像头ip通不通
          ippingCmd(localStorage.getItem("video_ip1")).then(response => {
            if (typeof (response.data.data) != 'undefined' && response.data.data != null && response.data.data == true) {
              this.webRtcServer = new WebRtcStreamer('DHQvideo', location.protocol + '//127.0.0.1:8000')
              this.webRtcServer.connect('rtsp://' + localStorage.getItem("video_name1") + ':' + localStorage.getItem("video_pwd1") + '@' + localStorage.getItem("video_ip1") + ':' + 554 + '/cam/realmonitor?channel=1&subtype=0')
              this.videoShowQ = true
            } else {
              this.videoShowQ = false//如果ip密码账户名不存在则隐藏前摄像头
            }
          });
        } else {
          this.videoShowQ = false//如果ip密码账户名不存在则隐藏前摄像头
        }//大华后摄像头
        if (localStorage.getItem("video_ip2") != null && localStorage.getItem("video_ip2") != "") {
          //检测摄像头ip通不通
          ippingCmd(localStorage.getItem("video_ip2")).then(response => {
            if (typeof (response.data.data) != 'undefined' && response.data.data != null && response.data.data == true) {
              this.webRtcServer1 = new WebRtcStreamer('DHHvideo', location.protocol + '//127.0.0.1:8000')
              this.webRtcServer1.connect('rtsp://' + localStorage.getItem("video_name2") + ':' + localStorage.getItem("video_pwd2") + '@' + localStorage.getItem("video_ip2") + ':' + 554 + '/cam/realmonitor?channel=1&subtype=0')
              this.videoShowH = true
            } else {
              this.videoShowH = false
            }
          });
        } else {
          this.videoShowH = false
        }
      } //=====吊舱前摄像头======
      else if (camera_type == 2) {
        //吊舱前摄像头
        if (localStorage.getItem("video_ip1") != null && localStorage.getItem("video_ip1") != "") {
          //检测摄像头ip通不通
          ippingCmd(localStorage.getItem("video_ip1")).then(response => {
            if (typeof (response.data.data) != 'undefined' && response.data.data!=null && response.data.data == true) {
              this.webRtcServer = new WebRtcStreamer('DCQvideo', location.protocol + '//127.0.0.1:8000')
              this.webRtcServer.connect('rtsp://' + localStorage.getItem("video_ip1") + ':' + 554 + '/stream=0')
              this.videoShowQ = true
            } else {
              this.videoShowQ = false//如果ip不存在则隐藏摄像头
            }
          });
        } else {
          this.videoShowQ = false//如果ip不存在则隐藏摄像头
        } //吊舱后摄像头
        if (localStorage.getItem("video_ip2") != null && localStorage.getItem("video_ip2") != "") {
          //检测摄像头ip通不通
          ippingCmd(localStorage.getItem("video_ip2")).then(response => {
            if (typeof (response.data.data) !='undefined' && response.data.data!=null && response.data.data == true) {
              this.webRtcServer1 = new WebRtcStreamer('DCHvideo', location.protocol + '//127.0.0.1:8000')
              this.webRtcServer1.connect('rtsp://' + localStorage.getItem("video_ip2") + ':' + 554 + '/stream=0')
              this.videoShowH = true
            } else {
              this.videoShowH = false
            }
          });
        } else {
          this.videoShowH = false
        }
      }//=====海康摄像头======
      else if (camera_type == 1) {
        if (localStorage.getItem("video_ip1") != null && localStorage.getItem("video_ip1") != "") {
          //检测摄像头ip通不通
          ippingCmd(localStorage.getItem("video_ip1")).then(response => {
            if (typeof (response.data.data) != 'undefined' && response.data.data!=null && response.data.data == true) {
              this.webRtcServer = new WebRtcStreamer('HKvideo', location.protocol + '//127.0.0.1:8000')
              this.webRtcServer.connect('rtsp://' + localStorage.getItem("video_ip1") + ':' + 554 + '/stream=0')
              this.videoShowQ = true
            } else {
              this.videoShowQ = false//如果ip不存在则隐藏摄像头
            }
          });
        } else {
          this.videoShowQ = false//如果ip不存在则隐藏摄像头
        }
      }
    },//中间滚动警告数据
    scroll() {
      this.animate = true; // 因为在消息向上滚动的时候需要添加css3过渡动画，所以这里需要设置true
      this.timer1 = setTimeout(() => { //  这里直接使用了es6的箭头函数，省去了处理this指向偏移问题，代码也比之前简化了很多
        this.alarms.push(this.alarms[0]); // 将数组的第一个元素添加到数组的
        this.alarms.shift(); //删除数组的第一个元素
        this.animate = false; // margin-top 为0 的时候取消过渡动画，实现无缝滚动
      }, 2000)
    },//目标位置
    mbwzF() {
      this.queryparms3.valu = $("#mbwzid").text();
      console.log("目标位置" + this.queryparms3.valu);
      if (this.queryparms3.valu != "") {
        this.queryparms3.robotid = localStorage.getItem("robot_config_id");
        mbwzCmd(this.queryparms3).then(response => {
          if (typeof (response) != null) this.$modal.msg(response.msg);
        });
      } else {
        this.$modal.msgError("目标位置不能为空")
      }
    },//手动模式速度设置
    sdmsdF() {
      this.queryparms3.valu = this.sdmssdzd;
      console.log("手动模式速度设置" + this.sdmssdzd);
      if (this.queryparms3.valu != "") {
        this.queryparms3.robotid = localStorage.getItem("robot_config_id");
        jqrsdCmd(this.queryparms3).then(response => {
          if (typeof (response) != null) this.$modal.msg(response.msg);
        });
      } else {
        this.$modal.msgError("手动模式速度设置不能为空")
      }
    },//电动门暂停
    ddmzt() {
      this.queryParams1.plcid = localStorage.getItem("plcid");
      ddmztCmd(this.queryParams1).then(response => {
        if (typeof (response) != null) this.$modal.msg(response.msg);
      });
    },//电动门关
    ddmg() {
      this.queryParams1.plcid = localStorage.getItem("plcid");
      dmgCmd(this.queryParams1).then(response => {
        if (typeof (response) != null) this.$modal.msg(response.msg);
      });
    }, //电动门开
    ddmk() {
      this.queryParams1.plcid = localStorage.getItem("plcid");
      ddmkCmd(this.queryParams1).then(response => {
        if (typeof (response) != null) this.$modal.msg(response.msg);
      });
    },//变轨停止
    bgtz() {
      this.queryParams1.plcid = localStorage.getItem("plcid");
      bgtzCmd(this.queryParams1).then(response => {
        if (typeof (response) != null) this.$modal.msg(response.msg);
      });
    },//变直轨
    bzg() {
      this.queryParams1.plcid = localStorage.getItem("plcid");
      bzgCmd(this.queryParams1).then(response => {
        if (typeof (response) != null) this.$modal.msg(response.msg);
      });
    }, //变弯轨
    bwg() {
      this.queryParams1.plcid = localStorage.getItem("plcid");
      bwgCmd(this.queryParams1).then(response => {
        if (typeof (response) != null) this.$modal.msg(response.msg);
      });
    },//放钩
    fgfun() {
      this.queryparms3.robotid = localStorage.getItem("robot_config_id");
      fgCmd(this.queryparms3).then(response => {
        if (typeof (response) != null) this.$modal.msg(response.msg);
      });
    }, //收钩
    sgfun() {
      this.queryparms3.robotid = localStorage.getItem("robot_config_id");
      sgCmd(this.queryparms3).then(response => {
        if (typeof (response) != null) this.$modal.msg(response.msg);
      });
    },//自由模式后退
    zymsht() {
      this.queryparms3.robotid = localStorage.getItem("robot_config_id");
      zymshtCmd(this.queryparms3).then(response => {
        if (typeof (response) != null) this.$modal.msg(response.msg);
      });
    },//自由模式前进
    zymsqj() {
      this.queryparms3.robotid = localStorage.getItem("robot_config_id");
      zymsqjCmd(this.queryparms3).then(response => {
        if (typeof (response) != null) this.$modal.msg(response.msg);
      });
    },//自由模式(启动)
    zymsqd() {
      this.queryparms3.robotid = localStorage.getItem("robot_config_id");
      zymsrobotrunCmd(this.queryparms3).then(response => {
        if (typeof (response) != null) this.$modal.msg(response.msg);
      });
    },//手动模式速度设定
    sdmslb(sdmssdzd) {
      this.sdmssdzd = sdmssdzd;
    },//自动模式速度设定
    zdmslb(zdmssdzd) {
      this.zdmssdzd = zdmssdzd;
    },//自动模式(启动)
    zdmsqd() {
      this.queryparms3.robotid = localStorage.getItem("robot_config_id");
      zdqdCmd(this.queryparms3).then(response => {
        if (typeof (response) != null) this.$modal.msg(response.msg);
      });
    }, //定点视频
    dd() {
      this.queryparms3.robotid = localStorage.getItem("robot_config_id");
      ddspCmd(this.queryparms3).then(response => {
        if (typeof (response) != null) this.$modal.msg(response.msg);
      });
    }, //连续视频
    lx() {
      this.queryparms3.robotid = localStorage.getItem("robot_config_id");
      lxspCmd(this.queryparms3).then(response => {
        if (typeof (response) != null) this.$modal.msg(response.msg);
      });
    },//一键返航
    yjfh() {
      this.queryparms3.robotid = localStorage.getItem("robot_config_id");
      yjfhCmd(this.queryparms3).then(response => {
        if (typeof (response) != null) this.$modal.msg(response.msg);
      });
    },//自由模式速度设定
    zymslb(zymssdzd) {
      this.zymssdzd = zymssdzd;
    }, //手动模式(启动)
    sdmsqd() {
      this.queryparms3.robotid = localStorage.getItem("robot_config_id");
      robotrunCmd(this.queryparms3).then(response => {
        if (typeof (response) != null) this.$modal.msg(response.msg);
      });
    }, //手动模式前进
    sdmsqj() {
      this.queryparms3.robotid = localStorage.getItem("robot_config_id");
      qjCmd(this.queryparms3).then(response => {
        if (typeof (response) != null) this.$modal.msg(response.msg);
      });
    }, //手动模式后退
    sdmsht() {
      this.queryparms3.robotid = localStorage.getItem("robot_config_id");
      htCmd(this.queryparms3).then(response => {
        if (typeof (response) != null) this.$modal.msg(response.msg);
      });
    },//电子地图
    getMap() {
      this.queryParams.plcid = localStorage.getItem("plcid");
      this.queryParams.robotid = localStorage.getItem("robot_config_id")
      if (typeof (this.queryParams.robotid) != "undefined" && this.queryParams.robotid != null) {
        getTrackMaprobot(this.queryParams).then(response => {
          if (typeof response.data != "undefined" && response.data != null && response.data.dzdt.length > 0) {
            this.result = response.data.dzdt;
            this.arrdata = [[]];//初始化地图值
            let positionx ="";// 机器人开始位置x坐标
            let positiony ="";// 机器人开始位置y坐标
            let xjbh ="";//  巡检点编号
            //机器人运行轨迹 //轨道地图数据
            //如果有当前巡检点位置坐标获取当前位置坐标
            if (typeof (response.data.positionxy) != "undefined" && response.data.positionxy != "unxy") {
              let positionxy = response.data.positionxy.split(",");//xy坐标
              positionx = positionxy[0];//存储值 机器人开始位置x坐标
              positiony = positionxy[1];//存储值 机器人开始位置y坐标
              xjbh = response.data.xjbh;//存储值 巡检点编号
            }
            const result_length = this.result.length;
            for (let i = 0; i < result_length; i++) {
              //因为我在后台取出来的数据是一行的，字符串形式
              let dataArray = this.result[i].xyposition.split(",");
              //这句话是必须的，每次都要新建一个一维数组,不然会报错
              this.arrdata[i] = new Array();
              const data_length = dataArray.length;
              for (let j = 0; j < data_length; j++) {
                this.arrdata[i][j] = dataArray[j];
              }
            }//电子地图、交替getMap
            if (this.count % 2 == 0)
              this.initEcharts1(this.arrdata,positionx,positiony,xjbh, 1);   //交替getMap
            else
              this.initEcharts1(this.arrdata,positionx,positiony,xjbh, 2);
            this.count += 1;
          } else {
            if(myChart != null) myChart.dispose()//销毁echarts
            this.result = null;
          }
        });
      } else {
        if(myChart != null) myChart.dispose()//销毁echarts
        this.result = null;
      }
    }, /*电子轨道图方法*/
    initEcharts1(dtop, xposition, yposition, xjbh, fg) {
      if (this.$refs.chinaMapChart) {
        this.$nextTick(() => {
          const myChart = echarts.init(this.$refs.chinaMapChart)
          let option;
          //轨道地图数据
          const data = dtop;
          option = {
            tooltip: {
              trigger: 'item',
              formatter: (params) => {  // params就是数据，这里可以打印一下看看
                // return 出去什么，鼠标移入就显示什么,marker就是提示前面蓝色的圆点
                if (typeof params.data[0] == 'undefined') {
                  return ``
                } else {
                  //return `${params.data[2]}</br>${params.marker}横坐标:${params.data[0]}</br>纵坐标:${params.data[1]}`
                  return `${typeof params.data[2] == 'undefined' ? 0 : params.data[2]}点位`
                }
              }
            },
            title: {
              /* text: '机器人巡检轨迹图',*/
              left: 'center'
            },
            grid: {//底图四个方向调整
              top: '11%',
              bottom: '18%',
              left: '1%',
              right: '1%'
            },
            xAxis: {
              splitLine: { //网格线
                show: false
              },
              type: 'value',
              axisLine: {
                onZero: false,
                show: false//隐藏y轴
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                show: false, //隐藏刻度值
              }
            },
            yAxis: {
              splitLine: { //网格线
                show: false
              },
              type: 'value',
              axisLine: {
                onZero: false,
                show: false//隐藏y轴
              },
              axisTick: {
                show: false,  //刻度线
              },
              axisLabel: {
                show: false, //隐藏刻度值
              }
            },
            series: [
              {
                label: {
                  color: '#cefc04',
                  show: true,
                  position: "top",
                  formatter: '{@value}',// 点旁边显示label，这里使用name: '横坐标'这样写也可以，鼠标移入出现提示。
                  fontSize:8,
                },
                id: 'a',
                /* type: (this.picpath == null || this.picpath == '') ? 'line':'scatter',//scatter 散点，line 曲线*/
                type: 'line',
                smooth: true,
                itemStyle: {
                  // 设置线条颜色
                  normal: {
                    color: {
                      colorStops: [{
                        offset: 0.5, color: '#0352b7' // 0% 处的颜色
                      }, {
                        offset: 1, color: '#0352b7' // 100% 处的颜色
                      }]
                    },
                    lineStyle: {
                      width: 4,//线条大小
                      type: 'solid'//可选值还有 dotted  solid
                    }
                  }
                },
                symbolSize: 12,//巡检点大小
                symbol: 'image://' + point,//巡检点图标
                data: data,
                //  symbol: 'circle',
                markPoint: {
                  label: {
                    color: '#2bf187',  // 文字颜色
                    // padding: [0, 0,-10, 0], // 可用padding调整图片内文字距离
                    show: true,
                    //formatter: '巡检机器人'// 自定义文字内容
                  },
                  //机器人大小
                  itemStyle: {
                    color: {
                      type: 'linear',
                      colorStops: [{
                        offset: 0, color: 'blue' // 0% 处的颜色
                      }, {
                        offset: 1, color: 'blue' // 100% 处的颜色
                      }]
                    }
                  },
                  //symbol: 'circle',
                  symbol: fg == 1 ? 'image://' + rbt : 'image://' + rbt1,
                  // 自定义图片作为标注展示
                  // symbolSize: [58, 38],  // 调整图片的长宽
                  // symbolOffset: [10, '-50%'],  // 调整标注图片的位移方向 大小
                  symbolSize: 16,//机器人大小
                  data: [{//1机器人移动坐标位置
                    xAxis: xposition,
                    yAxis: yposition,
                    value: xjbh,
                    fontSize: 9
                  } /*,{//2机器人移动坐标位置
                  xAxis:23000,
                  yAxis:21500,
                }*/],
                }
              },
              // 闪烁点的重点是以下配置
              {
                // 设置圆心点特效动画、大小
                type: 'effectScatter', data: dtop,
                symbolSize: 5,
                coordinateSystem: 'cartesian2d',
                // 何时显示特效:'render'-绘制完成后显示特效 'emphasis'-高亮（hover）的时候显示特效
                showEffectOn: 'render',
                // 涟漪特效配置
                rippleEffect: {
                  color: '#102cf1',
                  scale: 4,
                  // 波纹的绘制方式,可选'stroke'和'fill'
                  brushType: 'stroke'
                },
                //圆心点
                hoverAnimation: true,
                itemStyle: {
                  normal: {
                    color: '#0318a9',
                    shadowBlur: 80,
                    shadowColor: '#0656ec',
                  }
                },
                zlevel: 1
              }
            ], graphic: [
              {
                type: 'image', // 图形元素类型
                id: 'logo', // 更新或删除图形元素时指定更新哪个图形元素，如果不需要用可以忽略。
                right: 'center', // 根据父元素进行定位 （居中）
                bottom: '0%', // 根据父元素进行定位 （0%）, 如果bottom的值是 0，也可以删除该bottom属性值。
                z: 0,  // 层叠
                bounding: 'all', // 决定此图形元素在定位时，对自身的包围盒计算方式
                style: {
                  //  image: img, // 这里一定要注意、注意，必须是https开头的图片路径地址
                  width: 1060,
                  height: 420
                }
              }
            ]
          }
          if (option && typeof option === 'object') {
            myChart.setOption(option);
          }
          window.addEventListener("resize", () => {
            if(myChart!=null)myChart.resize();
          });//电子地图与背景图同比缩放
        })
      }
    }, //电机转速
    echarts1(djzs) {
      if (this.$refs.gauges) {
        this.$nextTick(() => {
          myChart1 = echarts.init(this.$refs.gauges)
          myChart1.setOption(
              {
                series: [
                  {
                    radius: "100%",
                    center: ['50%', '50%'],
                    type: 'gauge',
                    axisLine: {
                      lineStyle: {
                        width: 16,
                        color: [
                          [0.3, '#3e78f5'],
                          [0.7, '#9a54eb'],
                          [1, '#f37886']
                        ]
                      }
                    },
                    pointer: {
                      width: 9,
                      itemStyle: {
                        color: '#3e78f5'
                      }
                    },
                    axisTick: {
                      distance: -19,
                      length: 11,
                      lineStyle: {
                        color: '#fff',
                        width: 1
                      }
                    },
                    splitLine: {
                      distance: -19,
                      length: 13,
                      lineStyle: {
                        color: '#fff',
                        width: 2
                      }
                    },
                    axisLabel: {
                      color: '#fff',
                      distance: 9,
                      fontSize: 6
                    },
                    detail: {
                      // width:60,
                      // height:60,
                      fontSize: 10,
                      valueAnimation: true,
                      formatter: '{value} r/min',
                      color: '#fff'
                    },
                    data: [
                      {
                        value: djzs,
                        name: '电机转速',
                      }
                    ],
                    title: {
                      show: true,
                      fontSize: 10,
                      offsetCenter: ["0", "10%"],
                      color: '#fff'
                    },
                    max: 5000,
                    min: 0
                  }
                ]
              }
          );
          window.addEventListener("resize", () => {
            if(myChart1!=null)myChart1.resize();
          });//同比缩放
        })
      }
    }, //电机温度
    echarts2(djwd) {
      if (this.$refs.gauges2) {
        this.$nextTick(() => {
          myChart2 = echarts.init(this.$refs.gauges2)
          myChart2.setOption(
              {
                series: [
                  {
                    radius: "70%",
                    center: ['50%', '50%'],
                    type: 'gauge',
                    splitNumber: 9,
                    axisLine: {
                      lineStyle: {
                        width: 10,
                        color: [
                          [1, '#ddebf6'],
                        ]
                      }
                    },
                    pointer: {
                      show: false,
                      width: 5,
                      // itemStyle: {
                      //   color: '#3e78f5'
                      // }
                    },
                    axisTick: {
                      // show:false,
                      distance: -11,
                      length: 7,
                      lineStyle: {
                        color: '#a9a9a9',
                        width: 1
                      }
                    },
                    splitLine: {
                      distance: -10,
                      length: 9,
                      lineStyle: {
                        color: '#a9a9a9',
                        width: 2
                      }
                    },
                    axisLabel: {
                      color: '#fff',
                      distance: -22,
                      fontSize: 7
                    },
                    detail: {
                      // width:60,
                      // height:60,
                      fontSize: 10,
                      valueAnimation: true,
                      formatter: '{value}°C',
                      color: '#daa666'
                    },
                    data: [
                      {
                        value: djwd,
                        name: '电机温度',
                      }
                    ],
                    title: {
                      show: true,
                      offsetCenter: ["0", "-20%"],
                      color: '#daa666',
                      fontSize: 10
                    },
                    max: 360,
                    min: 0
                  }
                ]
              }
          );
          window.addEventListener("resize", () => {
            if(myChart2!=null)myChart2.resize();
          });//同比缩放
        })
      }
    },//电池电量
    echarts3(dcdl) {
      if (this.$refs.gauges3) {
        this.$nextTick(() => {
          myChart3 = echarts.init(this.$refs.gauges3)
          myChart3.setOption(
              {
                series: [{
                  name: "电量",
                  type: "gauge",
                  clockwise: true,
                  data: [{
                    value: dcdl,
                    name: "电池电量",
                  }],
                  radius: "100%",
                  // 仪表盘半径
                  // startAngle: 208,
                  // endAngle: -28,
                  min: 0,
                  max: 100,
                  splitNumber: 10,
                  center: ["50%",
                    "50%"],
                  axisLabel: {
                    // 大刻度标签。
                    show: true,
                    distance: 10,
                    color: "white",
                    fontSize: 8,
                    formatter: "{value}",
                  },
                  splitLine: {
                    length: 10,
                    // 分隔线长度
                    lineStyle: {
                      width: 2,
                      color: '#ffffff'
                    }
                  },
                  axisLine: {
                    // 仪表盘轴线(轮廓线)相关配置。
                    show: true,
                    lineStyle: {
                      // 仪表盘轴线样式。
                      opacity: 1,
                      width: 12,
                      // 表盘宽度
                      shadowBlur: 10,
                      color: [// 仪表盘轴线颜色
                        [1,
                          new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                            offset: 0,
                            color: "#00e4f0"
                          },
                            {
                              offset: 0.3,
                              color: "#00e4f0"
                            },
                            {
                              offset: 1,
                              color: "#00e4f0"
                            }])
                        ]
                      ]
                    },
                  },
                  axisTick: {
                    // 小刻度相关
                    splitNumber: 5,
                    // 小刻度个数
                    show: true
                  },
                  detail: {
                    // 仪表盘详情数据相关
                    color: "#5ab1ef",
                    fontSize: 10,
                    formatter: "{value}%",
                    offsetCenter: [0,
                      '20']
                  },
                  title: {
                    show: true,
                    offsetCenter: ["0", "-18%"],
                    color: '#b6cbea',
                    fontSize: 10
                  },
                  itemStyle: {
                    // 指针样式
                    color: "#fff"
                  },
                  pointer: {
                    // 仪表盘指针。
                    show: true,
                    length: "70%",
                    width: 6,
                  },
                },
                ],
              }
          );
          window.addEventListener("resize", () => {
            if(myChart3!=null)myChart3.resize();
          });//同比缩放
        })
      }
    },//水滴图
    drawLiquidfill(yq, jw, lhq, aq, xcsd, xcwd,) {
      const option = {
        series: [{
          //name: '违规项',
          type: 'liquidFill',
          radius: '90%',
          data: [jw / 100],
          label: {
            normal: {
              formatter: jw.toFixed(1),
              textStyle: {
                color: '#b3d3fa',
                fontSize: 9,
              }
            }
          },
          color: ['#446bf5'],
          backgroundStyle: {
            color: 'rgba(0,202,148,0.12)'
          },
          outline: {
            borderDistance: 1,
            itemStyle: {
              borderWidth: 2,
              borderColor: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: '#ade5f9'
                }, {
                  offset: 1,
                  color: '#2e92e2'
                }],
                globalCoord: false
              },
              shadowBlur: 10,
              shadowColor: '#63b1e6',
            }
          },
          // amplitude: 0,
        }]
      };
      myChart4 = echarts.init(document.getElementById("hygrometer"));
      myChart4.setOption(option);
      window.addEventListener("resize", () => {
        if(myChart4!=null)myChart4.resize();
      });//同比缩放
      const optiona = {
        series: [{
          name: '违规项',
          type: 'liquidFill',
          radius: '90%',
          // center: ['50%', '45%'],
          data: [yq / 100],
          label: {
            normal: {
              formatter: yq.toFixed(1),
              textStyle: {
                color: '#b3d3fa',
                fontSize: 9,
              }
            }
          },
          color: ['#30b763'],
          backgroundStyle: {
            color: 'rgba(0,202,148,0.12)'
          },
          outline: {
            borderDistance: 1,
            itemStyle: {
              borderWidth: 2,
              borderColor: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: '#86c0b7'
                }, {
                  offset: 1,
                  color: '#51cbae'
                }],
                globalCoord: false
              },
              shadowBlur: 10,
              shadowColor: '#63b1e6',
            }
          },
        }]
      };
      myChart5 = echarts.init(document.getElementById("hygrometer2"));
      myChart5.setOption(optiona);
      window.addEventListener("resize", () => {
        if(myChart5!=null)myChart5.resize();
      });//同比缩放
      const optionb = {
        series: [{
          name: '违规项',
          type: 'liquidFill',
          radius: '90%',
          // center: ['50%', '45%'],
          data: [lhq / 100],
          label: {
            normal: {
              formatter: lhq.toFixed(1),
              textStyle: {
                color: '#b3d3fa',
                fontSize: 9,
              }
            }
          },
          color: ['#ab55e7'],
          backgroundStyle: {
            color: 'rgba(0,202,148,0.12)'
          },
          outline: {
            borderDistance: 1,
            itemStyle: {
              borderWidth: 2,
              borderColor: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: '#bd96f0'
                }, {
                  offset: 1,
                  color: '#8e2ad1'
                }],
                globalCoord: false
              },
              shadowBlur: 10,
              shadowColor: '#1f1997',
            }
          },
          // amplitude: 0,
        }]
      };
      myChart6 = echarts.init(document.getElementById("hygrometer3"));
      myChart6.setOption(optionb);
      window.addEventListener("resize", () => {
        if(myChart6!=null)myChart6.resize();
      });//同比缩放
      const optionc = {
        series: [{
          name: '违规项',
          type: 'liquidFill',
          radius: '90%',
          // center: ['50%', '45%'],
          data: [xcwd / 100],
          label: {
            normal: {
              formatter: xcwd.toFixed(1),
              textStyle: {
                color: '#b3d3fa',
                fontSize: 9,
              }
            }
          },
          color: ['#6a6d2b'],
          backgroundStyle: {
            color: 'rgba(0,202,148,0.12)'
          },
          outline: {
            borderDistance: 1,
            itemStyle: {
              borderWidth: 2,
              borderColor: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: '#b8bf88'
                }, {
                  offset: 1,
                  color: '#b2c151'
                }],
                globalCoord: false
              },
              shadowBlur: 10,
              shadowColor: '#99a82f',
            }
          },
          // amplitude: 0,
        }]
      };
      myChart7 = echarts.init(document.getElementById("hygrometer4"));
      myChart7.setOption(optionc);
      window.addEventListener("resize", () => {
        if(myChart7!=null)myChart7.resize();
      });//同比缩放
      const optiond = {
        series: [{
          name: '违规项',
          type: 'liquidFill',
          radius: '90%',
          // center: ['50%', '45%'],
          data: [xcsd / 100],
          label: {
            normal: {
              formatter: xcsd.toFixed(1),
              textStyle: {
                color: '#b3d3fa',
                fontSize: 9,
              }
            }
          },
          color: ['#13a496'],
          backgroundStyle: {
            color: 'rgba(0,202,148,0.12)'
          },
          outline: {
            borderDistance: 1,
            itemStyle: {
              borderWidth: 2,
              borderColor: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: '#7bbdba'
                }, {
                  offset: 1,
                  color: '#3bc4c0'
                }],
                globalCoord: false
              },
              shadowBlur: 10,
              shadowColor: '#63b1e6',
            }
          },
          // amplitude: 0,
        }]
      };
      myChart8 = echarts.init(document.getElementById("hygrometer5"));
      myChart8.setOption(optiond);
      window.addEventListener("resize", () => {
        if(myChart8!=null)myChart8.resize();
      });//同比缩放
      const optione = {
        series: [{
          name: '违规项',
          type: 'liquidFill',
          radius: '90%',
          // center: ['50%', '45%'],
          data: [aq / 100],
          label: {
            normal: {
              formatter: aq.toFixed(1),
              textStyle: {
                color: '#b3d3fa',
                fontSize: 9,
              }
            }
          },
          color: ['#6073dd'],
          backgroundStyle: {
            color: 'rgba(0,202,148,0.12)'
          },
          outline: {
            borderDistance: 1,
            itemStyle: {
              borderWidth: 2,
              borderColor: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: '#503bbd'
                }, {
                  offset: 1,
                  color: '#7d80ad'
                }],
                globalCoord: false
              },
              shadowBlur: 10,
              shadowColor: '#63b1e6',
            }
          },
          // amplitude: 0,
        }]
      };
      myChart9 = echarts.init(document.getElementById("hygrometer6"));
      myChart9.setOption(optione);
      window.addEventListener("resize", () => {
        if(myChart9!=null)myChart9.resize();
      });//同比缩放
    },
    // 环境参数检测 柱状图
    initEcharts() {
      // 基本柱状图
      const option = {
        //统计色块legend
        legend: {
          show: true,
          //top:'5%',
          left: "74%",
          bottom: '20%',
          itemGap: 8,
          orient: "vertical",
          textStyle: {
            color: "#b1d2fa",
            fontSize: 13,
          },
          formatter: function (name) {
            const list = {
              test_1: '氧气',
              test_2: '甲烷',
              test_3: '硫化氢',
              test_4: '氨气'
            };
            return list[name];
          }
        },
        barWidth: 20,
        xAxis: {
          axisLine: {
            show: true, // 显示坐标轴线
            lineStyle: {
              color: '#042881', //x轴的颜色
            }
          },
          type: 'category',
          data: ['氧气', '甲烷', '硫化氢', '氨气'],
          splitNumber: 5,
          // show: false,
          name: localStorage.getItem("robot_name") == null ? "" : localStorage.getItem("robot_name"),
          nameLocation: "middle",
          nameTextStyle: {
            color: "#c2e4fd",
            fontSize: 13
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: false,           // 如果这个字段不设置，echarts会根据屏宽及横坐标数据自动给出间隔
            interval: 1,        // 间隔长度，可自定义（如果是时间格式，echarts会自动处理）
            hideOverlap: true,    // 隐藏互相遮挡的文本标签
          },
          splitLine: {
            // show: true,
            interval: 1
          },
        },
        yAxis: {
          axisLine: {
            show: true, // 显示坐标轴线
            lineStyle: {
              color: '#042881', //y轴的颜色
            }
          },
          type: 'value',
          // data: this.xData,

          axisLabel: {
            textStyle: {
              color: '#5DCBFF',
              fontSize: '10'
            }
          },
          splitNumber: 5,
          axisTick: {
            show: false
          },
          splitLine: {
            show: false,
            interval: 0
          }
          // show:false
        },
        grid: {
          top: "7%",
          bottom: "22%",
          left: "13%",
          right: "20%",
          // show:false,
        },
        series: [
          {
            // markLine: {
            //   data: [{ type: 'average', name: 'Avg' }],
            // },
            label: {
              show: true,
              position: "top",
              textStyle: {
                color: "#b8d6f8",
              },
            },
            barGap: "-100%",
            name: 'test_1',
            data: [this.yq == '无' ? 0 : this.yq, null, null, null],
            type: 'bar',
            stack: 'Mon',
            showBackground: true,
            itemStyle: {
              color: {
                type: 'linear',
                // x=0,y=1,柱子的颜色在垂直方向渐变
                x: 0,
                y: 1,
                colorStops: [
                  // 0%处的颜色
                  {
                    offset: 1,
                    color: '#28d6fd',
                  },
                  // 50%处的颜色
                  {
                    offset: 0.5,
                    color: '#259edf',
                  },
                  // 100%处的颜色
                  {
                    offset: 0,
                    color: '#2482d0',
                  },
                ],
                // global: false // 缺省为 false
              }
            }
          },
          {
            // markLine: {
            //   data: [{ type: 'average', name: 'Avg' }]
            // },
            label: {
              show: true,
              position: "top",
              textStyle: {
                color: "#b8d6f8",
              },
            },
            barGap: "-100%",
            name: 'test_2',
            data: [null, this.jw == '无' ? 0 :this.jw, null, null],
            type: 'bar',
            showBackground: true,
            // showBackground: true,
            // backgroundStyle: {
            //   color: 'rgba(180, 180, 180, 0.2)'
            // },
            itemStyle: {
              color: {
                type: 'linear',
                // x=0,y=1,柱子的颜色在垂直方向渐变
                x: 0,
                y: 1,
                colorStops: [
                  // 0%处的颜色
                  {
                    offset: 1,
                    color: '#61E070',
                  },
                  // 50%处的颜色
                  {
                    offset: 0.5,
                    color: '#46ab44',
                  },
                  // 100%处的颜色
                  {
                    offset: 0,
                    color: '#2E7E1F',
                  },
                ],
                // global: false // 缺省为 false
              }
            }

          },
          {
            // markLine: {
            //   data: [{ type: 'average', name: 'Avg' }]
            // },
            label: {
              show: true,
              position: "top",
              textStyle: {
                color: "#b8d6f8",
              },
            },
            barGap: "-100%",
            name: 'test_3',
            data: [null, null, this.lhq == "无" ? 0 : this.lhq, null],
            type: 'bar',
            showBackground: true,
            // showBackground: true,
            // backgroundStyle: {
            //   color: 'rgba(180, 180, 180, 0.2)'
            // },
            itemStyle: {
              color: {
                type: 'linear',
                // x=0,y=1,柱子的颜色在垂直方向渐变
                x: 0,
                y: 1,
                colorStops: [
                  // 0%处的颜色
                  {
                    offset: 1,
                    color: '#645BD6',
                  },
                  // 50%处的颜色
                  {
                    offset: 0.5,
                    color: '#4c4ab7',
                  },
                  // 100%处的颜色
                  {
                    offset: 0,
                    color: '#222B82',
                  },
                ],
                global: false // 缺省为 false
              }
            }
          },
          {
            /* markLine: {
               data: [{ type: 'average', name: 'Avg' }]
             },*/
            label: {
              show: true,
              position: "top",
              textStyle: {
                color: "#b8d6f8",
              },
            },
            // showBackground: true,
            barGap: "-100%",
            // barWidth: "50",
            name: 'test_4',
            data: [null, null, null, this.aq == '无' ? 0 : this.aq],
            type: 'bar',
            showBackground: true,
            itemStyle: {
              color: {
                type: 'linear',
                // x=0,y=1,柱子的颜色在垂直方向渐变
                x: 0,
                y: 1,
                colorStops: [
                  // 0%处的颜色
                  {
                    offset: 1,
                    color: '#3cf9cb',
                  },
                  // 50%处的颜色
                  {
                    offset: 0.5,
                    color: '#28c6a9',
                  },
                  // 100%处的颜色
                  {
                    offset: 0,
                    color: '#128e83',
                  },
                ],
                global: false // 缺省为 false
              }
            }
          }
        ]
      };
      myChart10 = echarts.init(document.getElementById("mychart"));
      myChart10.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        if(myChart10!=null)myChart10.resize();
      });
    },//巡检列表滚动逻辑
    infinitScroll() {
      const tableWrapper = this.$refs.table.$el.querySelector(".el-table__body-wrapper");
      // 设置滚动到底部
      tableWrapper.scrollTop = tableWrapper.scrollHeight;
      // 拿到表格挂载后的真实DOM
      const table = this.$refs.table;
      // 拿到表格中承载数据的div元素
      const divData = table.bodyWrapper
      start()
      divData.onmouseover = function () {
        clearInterval(t);
      }; //鼠标移入，停止滚动
      divData.onmouseout = function () {
        start()
      }; //鼠标移出，继续滚动
      // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
      let t;
      // let temp = document.getElementsByClassName('el-table__row')
      function start() {
        // 数据少于表格高度停止滚动
        if (divData.clientHeight >= divData.scrollHeight) {
          return;
        }
        t = setInterval(() => {
          // 元素自增距离顶部1像素
          divData.scrollTop += 2
          // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
          if (divData.clientHeight + divData.scrollTop == divData.scrollHeight) {
            // 重置table距离顶部距离
            divData.scrollTop = 0
          }
        }, 50)
      }
      start()
    },//机器人模式设置
    jqrmsF(jqrms) {
      this.queryparms3.valu = jqrms
      console.log("机器人模式设置" + this.queryparms3.valu);
      if (this.queryparms3.valu != "") {
        this.queryparms3.robotid = localStorage.getItem("robot_config_id");
        msszCmd(this.queryparms3).then(response => {
          if (typeof (response) != null) this.$modal.msg(response.msg);
        });
      } else {
        this.$modal.msgError("机器人模式设置不能为空")
      }
    },//机器人自由模式设置
    jqrzymsF(jqrms) {
      this.queryparms3.valu = jqrms
      console.log("机器人模式设置" + this.queryparms3.valu);
      if (this.queryparms3.valu != "") {
        this.queryparms3.robotid = localStorage.getItem("robot_config_id");
        zymsmsszCmd(this.queryparms3).then(response => {
          if (typeof (response) != null) this.$modal.msg(response.msg);
        });
      } else {
        this.$modal.msgError("机器人模式设置不能为空")
      }
    }, //机器人暂停
    zt() {
      this.queryparms3.robotid = localStorage.getItem("robot_config_id");
      robotstopCmd(this.queryparms3).then(response => {
        if (typeof (response) != null) this.$modal.msg(response.msg);
      });
    },//自动模式速度设置
    zdmsdsd() {
      this.queryparms3.valu = this.zdmssdzd;
      console.log("自动模式速度设置" + this.zdmssdzd);
      if (this.queryparms3.valu != "") {
        this.queryparms3.robotid = localStorage.getItem("robot_config_id");
        xjsdCmd(this.queryparms3).then(response => {
          if (typeof (response) != null) this.$modal.msg(response.msg);
        });
      } else {
        this.$modal.msgError("自动模式速度设置不能为空")
      }
    },//自由模式速度设置
    zymsdsd() {
      this.queryparms3.valu = this.zymssdzd;
      console.log("自由模式速度设置" + this.zymssdzd);
      if (this.queryparms3.valu != "") {
        this.queryparms3.robotid = localStorage.getItem("robot_config_id");
        jqrsdzymsCmd(this.queryparms3).then(response => {
          if (typeof (response) != null) this.$modal.msg(response.msg);
        });
      } else {
        this.$modal.msgError("自由模式速度设置不能为空")
      }
    },
  },
  computed: {
    //滚动播报
    classOption() {
      return {
        step: 0.6, // 数值越大速度滚动越快
        limitMoveNum: 8, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 530, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
        autoPlay: true,
      };
    },
  },
  enter() {
    this.isDologin = true;
  },
  leave() {
    this.isDologin = false;
  }
}
</script>
<style>
.el-input.el-input--suffix .el-input__inner {
  background: transparent !important;
}
</style>
<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
//去除按钮自带的
.el-button+.el-button {
  margin-left: 0px;
}
//左边按钮
.el-icon-d-arrow-right {
  font-size: 22px;
}
//右边按钮
.el-icon-d-arrow-left {
  font-size: 22px;
}

//抽屉
::v-deep .el-drawer.rtl {
  background-color: #0E2356;
}

::v-deep .el-drawer.ltr {
  background-color: #0E2356;
}
::v-deep .el-drawer__container{
  background-color: transparent;
  overflow: auto;
}

//左边抽屉开始............................
.PLCpanel {
  width: 94%;
  height: 40%;
  margin-left: 3%;
  margin-top: 3%;
  margin-right: 3%;
  border-radius: 10px;
  background: #0E2356;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.PLCpanel-p1 {
  width: 340px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 5%;
}

.PLCpanel-p1>p {
  width: 89px;
  height: 28px;
  font-size: 23px;
  font-family: "PangMenZhengDao";
  font-weight: 400;
  color: #5DCBFF;
}

.PLCpanel-para {
  width: 340px;
  height: 50px;
  display: flex;
  //justify-content: left;
  position: relative;
  left: -72px;
  //margin:0 0 0 -30px;
  margin-bottom: 4%;
}

.PLCpanel-parap1 {
  width: 89px;
  height: 22px;
  font-size: 12px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #EDEDED;
  position: absolute;
  left: 15%;
  top: 10px;
  transform: translateY(-10%);
}

.PLCpanel-parap2 {
  position: absolute;
  top: 36px;
  left: 17%;
  transform: translateY(-20%);
}

::v-deep.PLCpanel-parap3 {
  position: absolute;
  top: 20px;
  left: 20%;
  transform: translateX(100%) translateY(-30%);

  .el-input--suffix,
  .el-input__inner {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    border: 2px solid #54619D;
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    background: #17255d;
    color: #FFF !important;
    height: 30px;
    border-radius: 10px;
    width: 130px;
  }

  //图标
  .el-select__caret {
    margin-left: -40px;
  }
}

::v-deep.el-button.el-button--primary {
  background: #01052B !important;
}

.PLCpane2 {
  width: 340px;
  height: 50px;
  font-size: 12px;
  color: #EDEDED;
  font-family: Source Han Sans CN;
  display: flex;
  margin-left: -15px;
  justify-content: left;
  margin-bottom: 1%;
}

.PLCpane2-left {
  //margin: 0 20px 0 0;
  width: 150px;
  display: flex;
  justify-content: left;
  align-items: center;

  :nth-child(1) {
    width: 100px;
    margin-right: 4px;
  }

  :nth-child(2) {
    width: 50px;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1.5px solid #54619D;
    border-radius: 4px;
  }
}

.PLCpane3 {
  width: 340px;
  height: 50px;
  font-size: 12px;
  color: #EDEDED;
  font-family: Source Han Sans CN;
  display: flex;
  margin-left: -15px;
  justify-content: left;
}

.PLCpane3-left {
  width: 150px;
  margin-top: 10px;
  display: flex;
  justify-content: left;
  align-items: center;

  :nth-child(1) {
    width: 100px;
    margin-right: 4px;
  }

  :nth-child(2) {
    width: 50px;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1.5px solid #54619D;
    border-radius: 4px;
  }
}

.operation {
  width: 94%;
  height: 55%;
  margin-top: 14px;
  margin-left: 12px;
  margin-right: 12px;
  margin-bottom: 6px;
  border-radius: 10px;
  background: #0E2356;
}

.operation1 {
  width: 200px;
  height: 40px;
  position: relative;
}

.operation-p1 {
  font-size: 12px;
  color: #EDEDED;
  font-family: Source Han Sans CN;
  position: absolute;
  left: 20px;
  top: 8px;
}

.operation-p2 {
  position: absolute;
  left: 28.5px;
  top: 30px;
  margin-top: 5px;
}

.operation2 {
  width: 80px;
  display: flex;
  margin-top: 10px;
  margin-left: 28.5px;
}

.operation2>p {
  font-size: 14px;
  color: #EDEDED;
  font-family: Source Han Sans CN;
}

.operation3 {
  width: 180px;
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  //margin-bottom: 20px;
  margin-top: 10px;
  //background-color: #2ec7a1;
}

.operation3-1 {
  width: 100px;
  height: 30px;
  background: linear-gradient(0deg, #0E2356, #1B2D67);
  border: 2px solid #2B5B9B;
  border-radius: 5px;
  margin-bottom: 15px;
  //margin-left: 22%;
}

.operation3-2 {
  width: 100px;
  height: 30px;
  background: linear-gradient(0deg, #4C0820,#0E2356);
  border: 2px solid #942028;
  border-radius: 5px;
}

.operation4 {
  width: 120px;
  height: 100px;
  display: flex;
  margin-top: 10px;
  //background-color: #e6f062;
}

.operation4-1 {
  width: 100px;
  height: 30px;
  margin-top: 10px;
  background: linear-gradient(0deg, #0E2356, #065D70);
  border: 2px solid #108B8F;
  border-radius: 5px;
}

//左边抽屉结束..............................

//右边抽屉开始.............................
.right-top {
  width: 94%;
  height: 55%;
  margin-left: 3%;
  margin-top: 3%;
  margin-right: 3%;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #0E2356;
}

.right-topTitle {
  width: 340px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 7px;
}

.right-topTitle>p {
  width: 120px;
  height: 28px;
  font-size: 20px;
  font-family: PangMenZhengDao;
  font-weight: 400;
  color: #5DCBFF;
}

.Speed-dial {
  width: 94%;
  height: 65px;
  margin-left: 7px;
  margin-bottom: 75px;
  // margin-top:-10px;
  //background-color: cadetblue;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.right-mode {
  width: 360px;
  height: 50px;
  margin-bottom: 10px;
  margin-left: 7px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.mode-box {
  width: 60px;
  height: 50px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.mode-box :nth-child(1) {
  font-size: 12px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #EDEDED;
  margin-bottom: 2px;
}

.mode-box :nth-child(2) {
  width: 60px;
  height: 25px;
  text-align: center;
  border: 2px solid #54619D;
  border-radius: 10px;
  font-size: 12px;
  font-family: Bahnschrift;
  font-weight: 400;
  color: #EFEFEF;
  display: flex;
  justify-content: center;
  align-items: center;
}

.Mode-selection {
  width: 360px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 4px;
  margin-left: 7px;
}

.Mode-selection>p {
  width: 96px;
  height: 24px;
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #EDEDED;
}

.Operation-button {
  width: 360px;
  height: 80px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-left: 7px;
}

.Operation-buttonBox {
  width: 60px;
  height: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.Operation-buttonBox :nth-child(1) {
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(68deg, #3040F4, #3F79F4);
  margin-bottom: 5px;
  border-width: 0px
}

.Operation-buttonBox :nth-child(2) {
  width: 60px;
  height: 13px;
  text-align: center;
  font-size: 12px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #EDEDED;
}

//手动模式
.right-bottom1 {
  width: 94%;
  height: 40%;
  margin-left: 3%;
  margin-top: 3%;
  margin-right: 3%;
  border-radius: 10px;
  padding-top: 10px;
  background: #0E2356;
}

.right-bottomTitle {
  height: 30px;
}

.right-bottomTitle p:nth-child(1) {
  width: 95px;
  height: 26px;
  font-size: 12px;
  margin-left: 30px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #EDEDED;
}

.right-bottomTitle p:nth-child(2) {
  width: 72px;
  height: 2px;
  background: #4691FF;
  border-radius: 2px;
  margin-left: 36px;
  margin-top: 3px;
}

//自动模式
.right-bottom2 {
  width: 94%;
  height: 40%;
  margin-left: 3%;
  margin-top: 3%;
  margin-right: 3%;
  border-radius: 10px;
  padding-top: 10px;
  background:#0E2356;

  .right-bottomTitle {
    width: 98%;
    height: 15%;
    margin-top: 1%;

    //background-color: #00FF00;
    >p {
      width: 95px;
      height: 20px;
      font-size: 15px;
      margin-left: 2%;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #EDEDED;
    }

    span {
      display: block;
      width: 52px;
      height: 2px;
      margin-left: 2.5%;
      background: #4691FF;
    }
  }

  .right-bottomBox {
    width: 98%;
    height: 85%;

    .right-bottomBox1 {
      width: 98%;
      height: 30%;
      display: flex;
      justify-content: center;
      align-items: center;

      >span {
        display: block;
        //margin-top: 5px;
        margin-left: 4px;
        font-size: 12px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #EDEDED;
      }

      .btn {
        width: 100px;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: linear-gradient(0deg,#0E2356, #1B2D67);
        border: 2px solid #2B5B9B;
        border-radius: 4px;
        font-size: 12px;
        margin-left: 8px;
        font-family: Bahnschrift;
        font-weight: 400;
        color: #C1C1C1;
      }
    }

    .right-bottomBox2 {
      width: 100%;
      height: 28%;
      display: flex;
      justify-content: center;
      align-items: center;

      .btn1 {
        width: 50px;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: linear-gradient(0deg,#0E2356, #0D817A);
        border: 2px solid #2ec7a1;
        font-size: 12px;
        font-family: Bahnschrift;
        font-weight: 400;
        color: #C1C1C1;
      }

      .btn2 {
        width: 50px;
        height: 30px;
        margin-left: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: linear-gradient(0deg,#0E2356, #337F17);
        border: 2px solid #3CA813;
        font-size: 12px;
        font-family: Bahnschrift;
        font-weight: 400;
        color: #C1C1C1;
      }
    }

    .right-bottomBox3 {
      display: flex;
      align-items: center;
      justify-content: center;

      .btn1 {
        width: 50px;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: linear-gradient(0deg, #0E2356, #1B2D67);
        border: 2px solid #2B5B9B;
        font-size: 12px;
        font-family: Bahnschrift;
        font-weight: 400;
        color: #C1C1C1;
      }

      .btn2 {
        width: 50px;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: linear-gradient(0deg,#0E2356, #065D70);
        border: 2px solid #108B8F;
        font-size: 12px;
        font-family: Bahnschrift;
        font-weight: 400;
        color: #C1C1C1;
        margin-left: 10px;
      }

      .btn3 {
        width: 50px;
        height: 30px;
        margin-left: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: linear-gradient(0deg, #4C0820, #0E2356);
        border: 2px solid #942028;
        font-size: 12px;
        font-family: Bahnschrift;
        font-weight: 400;
        color: #C1C1C1;
      }
    }
  }

}
//一键返航
.right-bottom3 {
  width: 94%;
  height: 40%;
  margin-left: 3%;
  margin-top: 3%;
  margin-right: 3%;
  border-radius: 10px;
  padding-top: 10px;
  background:#0E2356;

  .right-bottomTitle {
    width: 98%;
    height: 20%;
    margin-top: 1%;

    //background-color: #00FF00;
    >p {
      width: 95px;
      height: 26px;
      font-size: 15px;
      margin-left: 2%;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #EDEDED;
    }

    span {
      display: block;
      width: 52px;
      height: 2px;
      margin-left: 2.5%;
      background: #4691FF;
    }
  }

  .right-bottomBox {
    width: 98%;
    height: 60%;
    display: flex;
    justify-content: center;
    align-items: flex-end;

    //background-color: #0264bf;
    .btn {
      width: 50px;
      height: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: linear-gradient(0deg, #0E2356, #1B2D67);
      border: 2px solid #2B5B9B;
      border-radius: 4px;
      font-size: 12px;
      //margin-left: 8px;
      font-family: Bahnschrift;
      font-weight: 400;
      color: #C1C1C1;
    }
  }
}

//自由模式
.right-bottom4 {
  width: 94%;
  height: 40%;
  margin-left: 3%;
  margin-top: 3%;
  margin-right: 3%;
  border-radius: 10px;
  padding-top: 10px;
  background: #0E2356;

  .right-bottomTitle {
    width: 98%;
    height: 20%;
    margin-top: 1%;

    //background-color: #00FF00;
    >p {
      width: 95px;
      height: 26px;
      font-size: 15px;
      margin-left: 2%;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #EDEDED;
    }

    span {
      display: block;
      width: 52px;
      height: 2px;
      margin-left: 2.5%;
      background: #4691FF;
    }
  }

  .right-bottomBox {
    width: 98%;
    height: 85%;

    //background-color: #2ec7a1;
    .right-bottomBox1 {
      width: 90%;
      height: 30%;
      margin-left: 10px;
      display: flex;
      justify-content: center;
      align-items: center;

      //background-color: hotpink;
      >span {
        display: block;
        //margin-top: 5px;
        margin-left: 4px;
        font-size: 12px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #EDEDED;
      }

      .btn {
        width: 80px;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: linear-gradient(0deg, #0E2356, #1B2D67);
        border: 2px solid #2B5B9B;
        border-radius: 4px;
        font-size: 12px;
        margin-left: 8px;
        font-family: Bahnschrift;
        font-weight: 400;
        color: #C1C1C1;
      }
    }

    .right-bottomBox2 {
      width: 100%;
      height: 28%;
      display: flex;
      justify-content: center;
      align-items: center;

      .btn1 {
        width: 50px;
        height: 25px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: linear-gradient(0deg, #0E2356, #0D817A);
        border: 2px solid #2ec7a1;
        font-size: 12px;
        font-family: Bahnschrift;
        font-weight: 400;
        color: #C1C1C1;
      }

      .btn2 {
        width: 50px;
        height: 25px;
        margin-left: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: linear-gradient(0deg, #0E2356, #337F17);
        border: 2px solid #3CA813;
        font-size: 12px;
        font-family: Bahnschrift;
        font-weight: 400;
        color: #C1C1C1;
      }
    }

    .right-bottomBox3 {
      display: flex;
      align-items: center;
      justify-content: center;

      .btn1 {
        width: 50px;
        height: 25px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: linear-gradient(0deg, #0E2356, #1B2D67);
        border: 2px solid #2B5B9B;
        font-size: 12px;
        font-family: Bahnschrift;
        font-weight: 400;
        color: #C1C1C1;
      }

      .btn2 {
        width: 50px;
        height: 25px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: linear-gradient(0deg, #0E2356, #065D70);
        border: 2px solid #108B8F;
        font-size: 12px;
        font-family: Bahnschrift;
        font-weight: 400;
        color: #C1C1C1;
        margin-left: 10px;
      }

      .btn3 {
        width: 50px;
        height: 25px;
        margin-left: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: linear-gradient(0deg, #4C0820, #0E2356);
        border: 2px solid #942028;
        font-size: 12px;
        font-family: Bahnschrift;
        font-weight: 400;
        color: #C1C1C1;
      }
    }
  }
}

.Target-position {
  width: 360px;
  height: 50px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 15px;
}

.Target-position1 {
  width: 130px;
  height: 34px;
  line-height: 34px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.Target-position1 :nth-child(1) {
  width: 80px;
  height: 30px;
  text-align: center;
  background:#17255d;
  border: 2px solid #54619D;
  border-radius: 10px;
  font-size: 12px;
  font-family: Bahnschrift;
  font-weight: 400;
  color: #C1C1C1;
}

.Target-position1 :nth-child(2) {
  margin-left: 3px;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #EDEDED;
}

.Target-position2 {
  width: 130px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.Target-position2>p {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 40px;
  font-size: 12px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #EDEDED;
  background-image: url(../../components/images/bottom.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.Speed-setting {
  width: 360px;
  height: 50px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.Speed-setting1 {
  width: 140px;
  height: 34px;
  line-height: 34px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.Speed-setting1>p {
  margin-left: 3px;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #EDEDED;
}

.right-bottomBox4 {
  margin-left: 3%;
  width: 40%;
  height: 12%;
  display: flex;
  align-items: flex-end;
  justify-content: space-around;

  //background-color: #d4f283;
  .btn1 {
    width: 50px;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(0deg, #0E2356, #0D817A);
    border: 2px solid #2ec7a1;
    font-size: 12px;
    font-family: Bahnschrift;
    font-weight: 400;
    color: #C1C1C1;
  }

  .btn2 {
    width: 50px;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(0deg, #0E2356, #337F17);
    border: 2px solid #3CA813;
    font-size: 12px;
    font-family: Bahnschrift;
    font-weight: 400;
    color: #C1C1C1;
  }
}

.Operation-Btn {
  width: 360px;
  height: 100px;
  display: flex;
  justify-content: space-around;
  margin-top: 30px;
}

.Operation-Btn1 {
  width: 70px;
  height: 30px;
  border: none;
  border: 2px solid #2B5B9B;
  border-radius: 5px;
  background: linear-gradient(0deg, #0E2356, #1B2D67);
}

.Operation-Btn2 {
  width: 70px;
  height: 30px;
  border: none;
  border-radius: 5px;
  background: linear-gradient(0deg, #0E2356, #065D70);
  border: 2px solid #108B8F;
}

.Operation-Btn3 {
  width: 70px;
  height: 30px;
  border: none;
  border-radius: 5px;
  background: linear-gradient(0deg, #4C0820, #0E2356);
  border: 2px solid #942028;
}

//右边抽屉结束..........................................
//首页部分...............................................
.app-container {
  width: 100%;
  height: calc(100vh - 35px);
  background-color: blanchedalmond;
  background: url("../../components/images/beijin.png");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: 100% 100%;
  background-size: cover;
}

//头部开始
.dataScreen-head {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 45px;
  background: url('../../components/images/head.png') no-repeat;
  background-size: 100% 100%;
}

.dataScreen-title {
  width: 50%;
  height: 100%;
  //background-color: #34EFBD;
}

.dataScreen-title>P {
  letter-spacing: 4px;
  text-align: center;
  font-size: 35px;
  font-family: PangMenZhengDao;
  font-weight: 400;
  font-style: italic;
  color: #FFFFFF;
  background: linear-gradient(0deg, #74C5F4 0%, #F3F6F0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

//头部结束....................................................
//内容开始
.dataScreen-contner {
  width: 100%;
  height: 100%;
  display: flex;
}

//左边内容开始
.dataScreen-left {
  width: 25%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  // background-color: aquamarine;
}

//机器人列表...............................
.dataScreen-robot {
  width: 92%;
  height: 30%;
  margin-bottom: 6px;
  margin-left: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  //background-color: coral;
}

.dataScreen-rotitle {
  width: 93%;
  height: 36px;
  line-height: 36px;
  margin-top: 1%;
  margin-bottom: 1%;
  margin-left: -20px;
  background-image: url(../../components/images/banner.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;

  p {
    margin-left: 4%;
    font-size: 20px;
    font-family: PangMenZhengDao;
    font-weight: 400;
    color: #5DCBFF;
  }
}

.dataScreen-rolist {
  width: 98%;
  height: 85%;
}

::v-deep .el-table {
  background-color: transparent !important;
}

// 机器人表格相关
.el-table__body-wrapper {
  &::-webkit-scrollbar {
    // 整个滚动条
    width: 20px; // 纵向滚动条的宽度
    background: rgba(71, 103, 182, 0.3);
    border: none;
  }

  &::-webkit-scrollbar-track {
    // 滚动条轨道
    border: none;
  }
}

.el-table th.gutter {
  display: none;
  width: 0;
}

.el-table colgroup col[name='gutter'] {
  display: none;
  width: 0;
}

.el-table::before {
  height: 0px;
}

.el-table__body {
  width: 100%;
}

/*滚动条的宽度*/
.commonScrollbarTable ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
  display: none;
}

.scrollbarShow ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
  display: block;
}

::v-deep .el-table,
::v-deep .el-table__expanded-cell {
  background-color: transparent;
}

// /* 表格内背景颜色 */
::v-deep .el-table th,
::v-deep .el-table tr {
  padding: 0;
  height: 30px;

}

::v-deep .el-table thead{
  background-image: url(../../components/images/liebiao.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: 99;
}

//::v-deep .el-table__row{
//background-image: url(../../components/images/liebiao1.png);
//background-repeat: no-repeat;
//background-size: 100% 100%;
//}

::v-deep .el-table th,
::v-deep .el-table tr,
::v-deep .el-table td {
  background-color: transparent;
  border-bottom: 1px solid rgba(32, 32, 32, 0.854);
  border-image: linear-gradient(rgb(26, 37, 95), rgb(20, 24, 85)) 20 20;
}

// 移入变色
::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td {
  background-color: #0c2d50c3;
}

//电器参数.......................................
.dataScreen-electrical {
  width: 92%;
  height: 30%;
  //margin-bottom: 3%;
  display: flex;
  flex-direction: column;
  align-items: center;
  //background-color: blueviolet;
}

.dataScreen-eltitle {
  width: 92%;
  height: 36px;
  line-height: 36px;
 /* margin-left: -20px;*/
  display: flex;
  //justify-content: space-between;
  margin-top: 1%;
  margin-bottom: 1%;
  background-image: url(../../components/images/banner.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;

  //background-color: #3CA813;
  p {
    width: 34%;
    height: 30px;
    margin-left: 4%;
    font-size: 20px;
    font-family: PangMenZhengDao;
    font-weight: 400;
    color: #5DCBFF;
    // background-color: #34EFBD;
  }
}

.dataScreen-ellist {
  width: 90%;
  height: 80%;

  // background-color: crimson;
  .item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    color: rgba(218, 216, 216, 0.851);
    font-size: 13px;
    display: flex;
    //justify-content: center;
    align-items: center;
    // line-height: 50px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    border-bottom: 1px solid rgba(32, 32, 32, 0.854);
    // border-image: -webkit-linear-gradient(rgb(215, 215, 214), rgb(153, 154, 154)) 20 20;
    // border-image: -moz-linear-gradient(rgb(215, 215, 214), rgb(153, 154, 154)) 20 20;
    // border-image: -o-linear-gradient(rgb(215, 215, 214), rgb(153, 154, 154)) 20 20;
    border-image: linear-gradient(rgb(26, 37, 95), rgb(20, 24, 85)) 20 20;
    height: 33px;
    margin-left: 10px;
  }
}

.dataScreen-ellist::-webkit-scrollbar {
  display: none;
  /*隐藏滚动条*/
}

::v-deep .el-input.el-input--suffix {

  // 2.修改背景颜色、字体颜色、边框、宽高
  .el-input__inner {
    background-color: transparent;
    border: none;
    color: #5bc8fc;
    height: 30px;
    width: 140px;
  }

  // 符号的位置会错乱，进行修正（水平）
  .el-input__suffix-inner {
    position: absolute;
  }
}

//设备运行参数.............................
.dataScreen-equipment {
  width: 92%;
  height: 31%;
  display: flex;
  flex-direction: column;
  align-items: center;
  // background-color: cadetblue;
}

.dataScreen-eqtitle {
  width: 92%;
  height: 36px;
  line-height: 36px;
  margin-top: 1%;
  margin-bottom: 1%;
  background-image: url(../../components/images/banner.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;

  p {
    margin-left: 4%;
    font-size: 20px;
    font-family: PangMenZhengDao;
    font-weight: 400;
    color: #5DCBFF;
  }
}

.dataScreen-eqlist {
  width: 93%;
  height: 80%;
  //padding-left: 20px;
}

::v-deep.el-progress-bar__inner {
  background-color: unset; // 将进度条默认的颜色给去除掉，若不生效就再加个!important
  // background-image: linear-gradient(90deg,#252799 100%,#2887b3 50% #27c9de 0%);  // 给进度条加上渐变色
  // background: linear-gradient(to right, #252799, #2887b3, #27c9de 70px);
  // background: linear-gradient(to right, red, blue 70px);
  // stroke-linecap:butt
}

.dataScreen-eqlist::-webkit-scrollbar {
  display: none;
  /*隐藏滚动条*/
}

//左边结束...................................................................




//中间内容开始
.dataScreen-center {
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

//告警数据.................................
.dataScreen-alarm {
  width: 98%;
  height: 36px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  background-image: url(../../components/images/alarm.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.dataScreen-alaimg>img {
  margin-left: 10px;
  margin-top: 5px;
}

#box {
  width: 360px;
  height: 32px;
  overflow: hidden;
  padding-left: 30px;
  // border: 1px solid black;
}

.anim {
  transition: all 0.5s;
  margin-top: -30px;
}

#con1 li {
  list-style: none;
  line-height: 30px;
  height: 30px;
}

.dataScreen-alatext {
  width: 90%;
  height: 80%;
  margin-left: 2%;
 /* margin-top: 8px;*/
  font-size: 12px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #FFD200;

  //background-color: #34EFBD;
  #box {
    width: 98%;
  }
}

//监控视频区.................................
.dataScreen-video {
  width: 98%;
  height: 55%;
  background-image: url(../../components/images/border.gif);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  //background-color: rgb(139, 196, 252);
}

// 摄像头图标
.dataScreen-videoimg {
  width: 80%;
  height: 6%;

  //background-color: rgb(244, 189, 170);
  img {
    margin-left: 2%;
    margin-top: 1%;
    height: 80%;
  }
}

//监控画面
.dataScreen-videoBox {
  width: 100%;
  height: 92%;
  display: flex;
  align-items: center;
  justify-content: center;
  //background-color: khaki;
}

.dataScreen-videoIcon {
  width: 49%;
  height: 99%;
  border: 1px solid #4689E5;
  background-color: #040404;
  background-image: url(../../components/images/jiankong.png);
  background-repeat: no-repeat;
  background-position: center center;
  //background-color: aquamarine;
  img {
    width: 30%;
    height: 40%;
    margin: 25% 30%;
  }
}

//轨道部分
.dataScreen-track {
  width: 98%;
  height: 40%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

}

.dataScreen-trackTop {
  width: 95%;
  height: 12%;
  display: flex;
  align-items: center;
  justify-content:center;
  background-image: url(../../components/images/color.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.dataScreen-trackIcon1 {
  display: flex;
  width: 108px;
  height: 100%;
  //background-color: #2ec7a1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.dataScreen-trackIcon1>img {
  width: 16px;
  height: 16px;
}

.dataScreen-trackIcon1>p {
  margin-left: 6px;
  width: 41px;
  height: 13px;
  font-size: 12px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #FFFFFF;
}

.dataScreen-trackIcon2 {
  width: 144px;
  height: 100%;
  //background-color: #FFD200;
  display: flex;
  justify-content: center;
  align-items: center;
}

.dataScreen-trackIcon2>img {
  width: 16px;
  height: 12px;
}

.dataScreen-trackIcon2>p {
  width: 41px;
  height: 13px;
  margin-left: 6px;
  font-size: 12px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #FFFFFF;
}
.dataScreen-trackIcon3{
  width:120px;
  height:100%;
  display: flex;
  justify-content: center;
  align-items: center;
  //background-color: cadetblue;
}
.dataScreen-trackIcon3>p {
  width: 140px;
  height: 13px;
  font-size: 12px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #FFFFFF;
  margin-left: 6px;
}

.dataScreen-trackIcon3{
  width:120px;
  height:100%;
  display: flex;
  justify-content: center;
  align-items: center;
  //background-color: cadetblue;
}
.dataScreen-trackIcon3>p {
  width: 140px;
  height: 13px;
  font-size: 12px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #FFFFFF;
  margin-left: 6px;
}
.dataScreen-trackIcon4{
  width:114px;
  height:100%;
  display: flex;
  justify-content: center;
  align-items: center;
  //background-color: cadetblue;
}
.dataScreen-trackIcon4>p {
  width: 140px;
  height: 13px;
  font-size: 12px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #FFFFFF;
  margin-left: 6px;
}
.dataScreen-trackIcon5{
  width:114px;
  height:100%;
  display: flex;
  justify-content: center;
  align-items: center;
  //background-color: cadetblue;
}
.dataScreen-trackIcon5>p {
  width: 140px;
  height: 13px;
  font-size: 12px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #FFFFFF;
  margin-left: 6px;
}

.dataScreen-trackIcon6{
  width:100px;
  height:100%;
  display: flex;
  justify-content: center;
  align-items: center;
  //background-color: cadetblue;
}
.dataScreen-trackIcon6>p {
  width: 140px;
  height: 13px;
  font-size: 12px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #FFFFFF;
  margin-left: 6px;
}

.dataScreen-trackBtom {
  width: 90%;
  height: 80%;
  display: flex;
  justify-content: center;
  align-items: center;
  //background-color: rgb(199, 152, 245);
}

.dataScreen-trackBtom1 {
  width: 90%;
  height: 80%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #5DCBFF;
  font-size: 20px;
  letter-spacing: 2px;
}

//中间部分结束....................................................................




//右边内容开始............................................
.dataScreen-right {
  width: 25%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  //margin-top: 10px;
  //background-color: cornflowerblue;
}

//图标..............................
.dataScreen-rightIcon {
  width: 96%;
  height: 10%;
  display: flex;
  justify-content: space-around;
  //background-color: rgb(223, 248, 113);
}

.dataScreen-rightIcon1 {
  width: 30%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  //margin-top: -8px;

  img {
    width: 78%;
    height: 56px;
  }

  .pname {
    display: block;
    font-size: 12px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    margin-top: -12px;
    color: #FFFFFF;
  }

  .p1 {
    font-size: 12px;
    font-family: Bahnschrift;
    font-weight: 400;
    color: #24ffc3;
  }

  .p2 {
    font-size: 12px;
    font-family: Bahnschrift;
    font-weight: 400;
    color: #a4ef34;
  }

  .p3 {
    font-size: 12px;
    font-family: Bahnschrift;
    font-weight: 400;
    color: #F32424;
  }
}

//巡检列表..................................
.dataScreen-inspection {
  width: 96%;
  height: 30%;
  display: flex;
  flex-direction: column;
  align-items: center;
  // background-color: lightblue;
}

.dataScreen-intitle {
  width: 90%;
  height: 36px;
  line-height: 36px;
  margin-top: 1%;
  margin-bottom: 1%;
  background-image: url(../../components/images/banner.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;

  p {
    margin-left: 4%;
    font-size: 22px;
    font-family: PangMenZhengDao;
    font-weight: 400;
    color: #5DCBFF;
  }
}

.dataScreen-inlist {
  width: 90%;
  height: 84%;

}

//环境参数.............................................
.dataScreen-parameter {
  width: 96%;
  height: 28%;
  display: flex;
  flex-direction: column;
  align-items: center;
  //background-color: cyan;
}

.dataScreen-paratitle {
  width: 90%;
  height: 36px;
  line-height: 36px;
  background-image: url(../../components/images/banner.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;

  p {
    margin-left: 4%;
    font-size: 22px;
    font-family: PangMenZhengDao;
    font-weight: 400;
    color: #5DCBFF;
  }
}

.dataScreen-paraBox {
  width: 99%;
  height: 85%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.concentration1 {
  width: 33%;
  height: 48%;
  display: flex;
  flex-direction: column;
  align-items: center;

  div {
    width: 70%;
    height: 70%;
  }

  p {
    margin-top: 5px;
    font-size: 12px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #FFFFFF;
  }
}

//环境参数检测..................................
.dataScreen-detection {
  width: 96%;
  height: 23%;
  display: flex;
  flex-direction: column;
  align-items: center;
  //background-color: rgb(237, 249, 167);
}

.dataScreen-deTitle {
  width: 90%;
  height: 36px;
  line-height: 36px;
  background-image: url(../../components/images/banner.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;

  p {
    margin-left: 4%;
    font-size: 22px;
    font-family: PangMenZhengDao;
    font-weight: 400;
    color: #5DCBFF;
  }
}

.echart {
  width: 99%;
  height: 80%;
  //background-color: #34EFBD;
}

.video-js {
  background-color: rgb(1 5 43);
  object-fit: fill;

  //隐藏video播放按钮
  video::-webkit-media-controls-play-button {
    display: none !important;
  }

  //隐藏video音量进度条
  video::-webkit-media-controls-volume-slider {
    display: none !important;
  }

  //隐藏video音量按钮
  video::-webkit-media-controls-mute-button {
    display: none !important;
  }

  video::-webkit-media-controls-toggle-closed-captions-button {
    display: none !important;
  }

  //隐藏当前时间
  video::-webkit-media-controls-current-time-display {
    display: none !important;
  }

  //隐藏剩余时间
  video::-webkit-media-controls-time-remaining-display {
    display: none !important;
  }

  //隐藏进度条
  video::-webkit-media-controls-timeline {
    display: none !important;
  }

  //更多选项
  video::-internal-media-controls-overflow-button {
    display: none !important;
  }
}

video {
  pointer-events: none;
}</style>
